LEGALGEEK

法律科技工作者的记事本

0%

在VSCode中运行JavaScript文件

发表于

在VS Code中运行JavaScript文件，并支持使用ES6模块语法。

安装Node.js

首先，确保您已经在您的机器上安装了Node.js。 Node.js是一个能够在浏览器之外运行JavaScript的环境。

安装Code Runner扩展

  1. 打开VS Code。
  2. 点击左侧菜单栏的Extensions图标（或使用快捷键Ctrl+Shift+X）来打开Extensions面板。
  3. 在搜索框中输入Code Runner。
  4. 从搜索结果中找到Code Runner然后点击安装。

运行JavaScript

  1. 创建一个.js文件，例如app.js。
  2. 在app.js文件中输入你的JavaScript代码。
  3. 保存文件。
  4. 右键点击编辑器中的代码，然后选择”Run Code”，或者使用快捷键Ctrl+Alt+N。
  5. VS Code将使用Node.js运行你的代码，并在OUTPUT窗口下方显示结果。

注意: 对于不支持自动运行的语言，你可能需要先在终端中导航到你的文件目录，然后手动运行它们，例如使用命令 node app.js。

使用ES6模块（import/export语句)

如果在运行js文件时报错:

1
(node:7823) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

这个错误表明你尝试在Node.js中使用ES6模块（也就是import/export语句)，但 Node.js 默认情况下不支持 ES6 模块。你可以通过以下方法来解决：

方法1（亲测）: 在package.json中设置type字段

在你的项目根目录下的 package.json 文件中添加 "type": "module" 字段：

1
2
3
4
5
{
  "name": "my-package",
  "version": "1.0.0",
  "type": "module",
}

这样，Node.js 就会把 .js 文件当作 ES6 模块来处理。

注意: 如果你的项目中没有 package.json 文件, 你可以通过运行命令 npm init -y 来创建一个。

方法2: 使用CommonJS模块

你可以把ES6的 import 和 export 语法更改为 CommonJS 的 require 和 module.exports：

将

1
import module from 'module'

修改为

1
const module = require('module')

并且将

1
export default myFunction

修改为

1
module.exports = myFunction

附：CommonJS 和 ES6 的差异

CommonJS 和 ES6 模块都是 JavaScript 模块化编程的主要方式，但它们之间存在一些关键的区别：

1. 语法

  • CommonJS:

    1
    2
    3
    4
    5
    // 导入模块
    var module = require('module');

    // 导出模块
    exports.module = module;

  • ES6 Modules:

    1
    2
    3
    4
    5
    // 导入模块
    import module from 'module';

    // 导出模块
    export default module;

2. 值的加载方式

  • CommonJS: 在加载模块时，获取的是一个对象。这个对象只是被导出值的拷贝，因此任何对该对象的改变都不会影响到原始模块。

  • ES6 Modules: 在加载模块时，获取的是一个动态只读引用（live-read-only view）到所导出的元素。如果原始模块发生变化，那么这些改变也会反映到这个引用上。

3. 加载时间

  • CommonJS: 是同步加载模块的，适合在服务器端使用。

  • ES6 Modules: 支持异步加载，更适合在浏览器环境中使用。

4. 循环依赖

  • CommonJS: 在处理循环依赖时可能会出现问题，因为它采用的是值拷贝的形式。

  • ES6 Modules: 更好地处理了循环依赖的情况，因为它采用的是引用的方式。

5. 顶层作用域

  • CommonJS: 每个模块都有自己独立的顶层作用域，不会污染全局作用域。

  • ES6 Modules: 同样，每个 ES6 模块也有自己的顶级作用域。

总结起来，ES6模块与CommonJS模块最大的区别在于 CommonJS 模块使用的是值拷贝，而 ES6 模块使用的是引用传递。同时，由于 ES6 模块的设计更倾向于静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量，有利于性能的提升。

方法3: 使用.mjs扩展名

Node.js 允许你通过将文件扩展名从 .js 改为 .mjs 来标记它为 ES6 模块。 所以，你可以重命名你的文件，并在 import 语句中更新你的引用。

.mjs 文件是一种 JavaScript 模块文件，它用于包含 JavaScript 代码和数据。这个扩展名告诉 Node.js 运行时环境和其他 JavaScript 工具，该文件是一个使用 ECMAScript 模块 (ESM) 语法的模块。

主要使用场景：

  1. Node.js 中的 ECMAScript Modules: 跟传统的 CommonJS 模块相比，ECMAScript Modules 提供了一种更为现代的、静态的模块系统。.mjs 扩展名的使用使得 Node.js 可以区分两种模块，并且由于它们的不兼容性，避免了混用带来的问题。
  2. 在浏览器中使用 ECMAScript Modules: 现代浏览器也支持 ESM，并可以通过 <script type="module"> 标签加载 .mjs 文件。
  3. 工具和库的打包和发布: 在某些 JavaScript 工具（如 webpack, rollup）和库中，.mjs 文件可以被作为一种方式来明确表示采用 ESM 语法，有助于优化打包和运行效率。

请注意，虽然 .mjs 的使用能够更清楚地指示出你正在使用 ESM，但并非所有的运行环境或者工具都会支持此类文件。所以在选择是否使用 .mjs 做为文件扩展名时，要考虑到你的项目的上下文以及目标环境。

注意： 这些方式可能会导致你的代码与旧版本的Node.js不兼容。为了避免出现问题，你可能需要使用一个像 Babel 这样的工具来转译你的代码。