Node.js 中的ES模块现状[每日前端夜话0x8D]

每日前端夜话0x8D每日前端夜话，陪你聊前端。
每天晚上18:00准时推送。
正文共：2799 字
预计阅读时间：10 分钟
作者：Tobias Nieen
翻译：疯狂的技术宅
来源：jaxenter

几乎每种编程语言都能将组成程序的代码拆分为多个文件。在 C 和 C++ 中
#include
复制代码
指令就用于这个目的，而 Java 和 Python 有
import
复制代码
关键字。JavaScript 是迄今为止为数不多的例外之一，但新的 JavaScript 标准（ECMAScript 6）通过引入所谓的 ECMAScript 模块来改变这一点。所有主流浏览器都支持这个新标准 —— 只有 Node.js 似乎落后了。这是为什么？

新的 ECMAScript（ES）模块与以前的语言版本不完全兼容，因此使用的 JavaScript 引擎需要知道每一个文件是“旧” JavaScript 代码还是“新”模块。
例如在 ECMAScript 5 中引入的许多程序员首选的严格模式曾经是可选的，必须明确启用才行，同时它在 ES 模块中始终处于活动状态。因此，以下代码段在语法上可以解释为传统的 JavaScript 代码和 ES 模块：

1a = 5;

复制代码

作为经典的 Node.js 模块，这相当于 global.a = 5
复制代码
，因为未声明变量 a
复制代码
并且未明确激活严格模式，因此 a
复制代码
被视为全局变量。如果你尝试加载与 ES 模块相同的文件，则会收到错误 “ReferenceError：a is not defined”，因为未声明的变量可能无法在严格模式下使用。
浏览器通过[/code][/i] 标记的扩展解决了区别问题：没有 [i][code]type
复制代码
属性或带有 type="text/javascript"
复制代码
属性的脚本仍然在传统模式下运行，而当脚本使用 type ="module"
复制代码
属性时则作为模块处理。由于这种简单的分离，现在所有流行的浏览器都支持新的模块。Node.js 中的实现要困难得多：2009年发明的 JavaScript 应用程序框架使用 CommonJS 标准模块，该标准基于 require
复制代码
函数。此函数可以随时根据其相对于当前运行模块的路径加载另一个模块。新的 ES 模块也是由它们的路径定义的，但是 Node.js 是如何知道正在加载的模块是遗留的 CommonJS 还是 ES 模块的呢？仅仅基于语法是不够的，因为即使不使用新关键字的 ES 模块也不兼容CommonJS模块。
此外，ECMAScript 6 还提供了可以从 URL 加载模块，而 CommonJS 仅限于文件的相对和绝对路径。这种创新不仅使加载更复杂，而且可能更慢，因为 URL 不需要指向本地文件。特别是在浏览器中，脚本和模块通常通过HTTP网络协议加载。
CommonJS 允许通过 require
复制代码
函数加载模块，该函数返回加载的模块。例如，CommonJS 模块可能如下所示：

1const { readFile } = require('fs');2const myModule = require('./my-module');

复制代码

这不是 ECMAScript 6 中的一个选项，因为在 require()
复制代码
调用期间，模块在 HTTP 上加载时可能会长时间阻止整个程序的执行。相反，ES 模块提供了两种加载其他模块的方法。在大多数情况下，使用 import
复制代码
是有意义的：

1import { readFile } from 'fs';2import myModule from './my-module';

复制代码

但是，这会不可避免地延迟模块的执行，直到加载 fs
复制代码
和 ./my-module
复制代码
，但它们不会阻止其他模块的执行。当模块必须动态加载时，会变得更加复杂。CommonJS 模块中看起来微不足道的东西变得越来越难以异步：

1if (condition) {2 myOtherModule = require('./my-other-module');3}

复制代码

ECMAScript 希望通过功能性使用

import

复制代码

关键字来解决这个问题，该关键字异步加载模块并在每次调用时返回 Promise
复制代码
对象。但缺点是程序员现在也负责错误处理，因为错误不会像在同步情况下那样自动传给调用者。

1if (condition) { 2 import('./my-other-module.js') 3 .then(myOtherModule => { 4 // Module was loaded successfully and can 5 // now be used here. 6 }) 7 .catch(err => { 8 // An error occurred that needs to be handled here. 9 console.error(err);10 });11}

复制代码

如果使用 async
复制代码
关键字声明了要加载模块的函数，由于 ECMAScript 6 中引入了 await
复制代码
函数，import()
复制代码
的使用更加清晰，并且错误处理被传递给同步执行中的调用者：

1if (condition) {2 myOtherModule = await import('./my-other-module');3}

复制代码

import
复制代码
作为一个函数使用，它不是 ECMAScript 6 的一个组件，而是一个所谓的 Stage 3 提案，有可能会在下一个 JavaScript 版本中标准化。此外 Firefox、Chrome 和 Safari 等许多浏览器以及 Node.js 都支持它。
[h1]在Node.js中使用[/h1]区分 CommonJS 和 ES 模块的难度导致在 Node.js 下为 ES 模块引入了新的文件扩展名：如果已设置了 -experimental-modules
复制代码
选项， Node.js 可以把以 .mjs
复制代码
结尾的文件作为 ES 模块进行加载。从 2017 年 9 月发布的 Node.js 8.5.0 开始，如果将以下代码保存为 testmodule.mjs
复制代码
，则可以用 node -experimental-modules testmodule.mjs
复制代码
命令执行它：

1export function helloWorld(name) {2 console.log(`Hallo, ${name}!`);3}45helloWorld('javascript-conference.com');

复制代码

Node.js 12 扩展了对 ES 模块的支持。重要的是，现在可以用 package.json
复制代码
文件，它包含了诸如包的唯一名称之类的信息。现在使用的 JSON 格式扩展了一个名为 type
复制代码
的新属性。可以选择将其更改为 commonjs
复制代码
或 module
复制代码
以确定默认情况下应加载的包中所包含的 JavaScript 文件的模式。以下配置指定了一个包 example-package
复制代码
，它至少必须包含 ES 模块 index.js
复制代码
：

1{2 "name": "example-package",3 "type": "module",4 "main": "index.js"5}

复制代码

像往常一样，“main” 字段指定哪个文件应该作为入口点。例如 index.js
复制代码
模块可能如下所示：

1import { userInfo } from 'os';23export function greet() {4 return `Hello ${userInfo().username}!`;5}

复制代码

现在可以从其他文件加载此模块。包通常位于 node_modules
复制代码
目录中各自的文件夹中。要加载刚创建的包，我们可以用以下目录结构和一个名为 main.js 的新文件：

1- main.js2+ node_modules3 + example-package4 - package.json5 - index.js

复制代码

main.js
复制代码
文件可以引用传统的 CommonJS 或新的 ECMAScript 模块。在这两种情况下，example-package
复制代码
都不能使用通常的 require()
复制代码
调用加载，因为 ECMAScript 模块必须始终异步加载。因此 CommonJS 模块必须使用 import
复制代码
加载 ES 模块：

1import('example-package')2.then(package => {3 console.log(package.greet());4})5.catch(err => {6 console.error(err);7});

复制代码

这样做的缺点是 CommonJS 模块不能像往常那样在开始时访问其他模块或软件包，但只能在事实和异步之后才能访问。执行如上所述脚本：node -experimental-modules main.js
复制代码
，如果入口点本身也是 ES 模块，则更容易。如果将 main.js
复制代码
重命名为 main.mjs
复制代码
，则可以用 import
复制代码
：

1import { greet } from 'example-package';2console.log(greet());

复制代码

因此，可以在一个应用程序中同时使用 CommonJS 和 ECMAScript 模块，但它有可能会引发混乱。因为 CommonJS 模块需要知道正在加载的模块是 CommonJS 还是 ES 模块，并且只能异步加载 ES 模块。这也适用于通过 npm 安装的软件包的加载。fs
复制代码
和 crypto
复制代码
等内置模块可以通过两种方式加载。
[h1]Node.js 中的差异[/h1]除了异步加载依赖项的问题之外，Node.js 中的旧模块和新模块之间还存在进一步的差异。特别是 ES 模块中不再提供 Node.js 的特定功能，如变量 __dirname
复制代码
，
__filename
复制代码
，
export
复制代码
和 module
复制代码
。__dirname
复制代码
和 __filename
复制代码
可以根据需要从新的 import.meta
复制代码
对象重建：

1import { fileURLToPath } from 'url';2import { dirname} from 'path';34const __filename = fileURLToPath(import.meta.url);5const __dirname = dirname(__filename);

复制代码

变量 module
复制代码
和 exports
复制代码
已被删除而无需替换；这同样适用于 module.filename
复制代码
，module.id
复制代码
和 module.parent
复制代码
等属性。同样 require()
复制代码
和 require.main
复制代码
不再可用。
虽然 CommonJS 中的循环依赖关系已经通过缓存各个模块的 module.exports 对象来解决，但 ECMAScript 6 用了所谓的绑定。简而言之，ES 模块不会导出和导入值，只是对值的引用。导入此类引用的模块可以访问该值，但无法修改它。已导出引用的模块可以为引用分配新值，该值将由从该点导入引用的其他模块使用。与之前的概念相比，这有着本质的区别，后者允许在任何时间点将属性分配给 CommonJS 模块的 module.exports
复制代码
对象，从而使这些更改仅部分反映在其他模块中。
根据 ECMAScript 规范，import
复制代码
默认情况下不会用文件扩展名完成文件路径，因为 Node.js 之前已经为 CommonJS 模块完成了，因此必须明确说明。同样当指定的路径是目录时，行为会发生变化：import'./directory'
复制代码
不会在指定的文件夹中查找 index.js
复制代码
文件，而是抛出一个错误，这是 Node.js 中的标准情况。两者都可以通过传递实验选项 -es-module-specifier-resolution = node
复制代码
来改变。
[h1]结论[/h1]在最近发布的 Node.js 12.1.0 中，仍然需要通过 -experimental-modules
复制代码
  选项显式激活 ECMAScript 模块的使用，因为它是一个实验性功能。但是，开发人员的目标是在 Node.js 12 成为新的长期支持版本之前，在没有明确激活的情况下完成此功能并支持 ES 模块，预计将会在2019年10月完成。
现有的各种  CommonJS  模块使从 CommonJS 到 ECMAScript 模块的转换变得复杂。单个程序包无法切换到 ES 模块，从而不会发生与使用 require()
复制代码
  加载相应程序包的现有程序和程序包不兼容的情况。像 Babel 这样的工具可以将较新的语法转换为与旧环境兼容的代码，这使转换更容易。像 Deno 这样的新框架背弃了近年来多样化的模块化系统，完全依赖于 ECMAScript 模块，这对于把 JavaScript 作为编程语言的开发，标准化模块的引入是重要的一步，为未来的改进铺平了道路。
原文：https://jaxenter.com/es-modules-node-js-status-quo-159508.html

下面夹杂一些私货：也许你和高薪之间只差这一张图
2019年京程一灯课程体系上新，这是我们第一次将全部课程列表对外开放。

愿你有个好前程，愿你月薪30K。我们是认真的！

在公众号内回复“体系”查看高清大图
长按二维码，加大鹏老师微信好友
拉你加入前端技术交流群
唠一唠怎样才能拿高薪

往期精选

小手一抖，资料全有。长按二维码关注前端先锋，阅读更多技术文章和业界动态。