[教程]对比ECMAScript 模块 (ESM) 和 CommonJS

JavaScript 最初只是一种简单的语言，用于使静态网站更具活力和交互性。然而，用 JavaScript 编写的项目在很久以前就开始变得越来越复杂。正因为如此，我们很快就发现需要一种方法来将代码分解成更小、更易于管理的片段。多年来，人们对如何实现将 JavaScript 代码拆分成模块有很多不同的想法。在本文中，我们将比较最流行的几种方法：ECMAScript 模块 (ESM) 和 CommonJS。

CommonJS

Node.js 的创建者知道，代码需要组织成可重用的模块。然而，当 Node.js 于 2009 年首次推出时，JavaScript 还没有正式的模块系统。因此，Node.js 引入了 CommonJS 模块。

创建和导出模块

在 Node.js 中，每个文件都是一个独立的模块。要开始使用 CommonJS，让我们用一个简单的函数创建一个新文件。

sum.js

function sum(numberOne, numberTwo) {
  return numberOne + numberTwo;
}
 
module.exports = { sum };

在每个文件中，module 变量都代表当前模块。我们可以使用 module.exports 来让其他模块导入和使用 sum 函数。

导入模块

要导入模块，我们需要使用 require 函数并提供正确的路径。

const { sum } = require('./sum');
console.log(sum(1, 2)); // 3

CommonJS 还支持 import 函数，它允许我们异步导入模块。

import('./sum.js')
  .then(({ sum }) => {
    console.log(sum(1, 2)); // 3
  })

ECMAScript Modules

JavaScript 语言进行了一次重大升级，即 ES6 或 ECMAScript 2015。除其他功能外，它还包括模块管理的官方语法，即 ECMAScript Modules (ESM)。

创建和导出模块

我们必须使用导出关键字来公开模块中的各种值。

sum.js

function sum(numberOne, numberTwo) {
  return numberOne + numberTwo;
}
 
export { sum };

使用上述语法，我们可以导出任意多个值。此外，模块还可以包含一个默认导出。

subtract.js:

function subtract(numberOne, numberTwo) {
  return numberOne - numberTwo;
}
 
export default subtract;

导入和导出模块

要导入 ECMAScript 模块，我们必须使用 import 关键字。

import { sum } from './sum.js';
import subtract from './subtract.js';
 
console.log(sum(3, 2)); // 5
console.log(subtract(3, 2)); // 1

请注意，我们使用略有不同的语法来导入默认导出。重要的是，默认导入使用的名称不必与默认导出一致。

import sum from './subtract.js';

这也是有些人不喜欢使用默认出口的原因之一。

ESM 还支持导入功能，允许我们异步导入模块。

import('./sum.js')
  .then(({ sum }) => {
    console.log(sum(1, 2)); // 3
  })

ECMAScript 模块的兼容

虽然 ECMAScript 模块是在 2015 年左右推出的，但社区还是花了一段时间才跟上步伐。不过，现在我们甚至可以在浏览器中原生使用 ESM。

webpack 等捆绑程序多年前就开始支持 ECMAScript 模块。它们可以将我们在多个 JavaScript 文件中使用 ESM 的代码转换成单个文件输出。它还可以将捆绑包拆分成多个文件，以提高性能。

Node.js 在 8.5.0 版左右开始尝试支持 ESM。不过当时要使用它，我们必须包含 --experimental-modules 模块。在 13.2.0 版中，他们取消了在使用 Node 模块时使用该标志的要求。不过，在 Node.js 中使用 ESM 仍然会在终端中出现警告，提示该功能是试验性的。自 2020 年 4 月发布 14.0.0 版后，该警告不再出现。要在 Node.js 中使用 ESM，我们可以在 package.js 中添加 "type"（类型）和 "module"（模块）："模块"。

有趣的是，如果您习惯于使用 Webpack 等工具，那么 Node.js 中的 ESM 实现可能会略有不同。我们必须提供导入模块的完整路径，包括文件扩展名。

TypeScript 中的 ECMAScript 模块

早在 2015 年的 TypeScript 1.5 中，TypeScript 就开始支持 ECMAScript Modules 语法。需要了解的是，它默认将我们的代码移植到使用 CommonJS 的引擎盖下。

import { sum } from './sum';
 
sum(1, 2);

使用默认配置将上述文件转换为 JavaScript 时，我们可以看到 CommonJS。

"use strict";
exports.__esModule = true;
var sum_1 = require("./sum");
(0, sum_1.sum)(1, 2);

TypeScript 添加了 __esModule 标记，以表明文件是从 ESM 编译到 CommonJS 的。

要在 TypeScript 和 Node.js 中使用 ESM，我们需要稍微修改一下 tsconfig.json 文件。

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "module": "NodeNext",
    "outDir": "dist"
  }
}

由于使用了 NodeNext，TypeScript 将使用 ESM 导入和导出，而不是 CommonJS。请务必记住，Node.js 要求我们提供导入模块的完整路径。当我们使用希望在 Node.js 环境中运行的 TypeScript 时，也必须这样做。

与直觉相反的是，即使我们在编写 TypeScript 代码，也必须提供包含 .js 扩展名的路径。

import { sum } from './sum.js';
 
console.log(sum(1, 2));

完成所有这些后，我们就可以拥有一个在 Node.js 中运行并在引擎盖下使用 ECMAScript 模块的 TypeScript 应用程序。

管理依赖关系

在处理依赖关系时，在 CommonJS 和 ECMAScript 模块之间做出选择的问题会变得更加复杂。

使用 ECMAScript 模块的项目可以使用导入语法使用 CommonJS 模块。但是，使用 CommonJS 的项目除了通过异步导入函数外，不能以任何方式导入仅使用 ESM 的模块。正因为如此，许多使用 ECMAScript 编写 JavaScript 库的开发人员决定同时发布 CommonJS 和 ESM 代码。这样，他们的库就可以兼容任何一种模块系统。

然而，并非所有开发人员都愿意处理发布同时适用于 CommonJS 和 ESM 的软件包的麻烦。只发布与 ESM 兼容的库版本的做法越来越流行。因此，我们需要了解 CommonJS 和 ESM 的工作原理及其局限性。

总结

在本文中，我们介绍了 CommonJS 和 ECMAScript 模块的工作原理。我们了解了它们的语法以及如何在 Node.js 和 TypeScript 中使用它们。由于并非所有开发人员都愿意费尽周折地发布同时适用于 CommonJS 和 ESM 的包，因此了解这两种模块系统之间的区别变得越来越重要。有了这些知识，我们才能更好地为项目选择合适的模块系统，并适应与之相关的任何挑战。