「Node.js」ESModule 与 CommonJS 的 区别

前言

Node.js支持两种模块系统：CommonJS 和 ESModules（ESM），它们在语法和功能上有一些不同。

CommonJS (CJS)

CommonJS 是 Node.js 最早支持的模块规范，由于它的出现在ES6之前，因此采取的是同步加载模块的方式。这在服务端是可接受的，因为文件都在本地，同步加载不会引起明显的延迟问题。但是这样的加载方式不适合用在客户端，因为它会导致浏览器在等待模块下载和解析的期间挂起。

• CommonJS 通过 require 函数来导入模块，如 const module = require('module_name')。
• 模块导出使用 module.exports 对象，如 module.exports = value 或 exports.value = value。

ESModules (ESM)

ESModules 是ES6引入的官方标准化模块系统，支持静态导入和导出。静态模块结构允许JavaScript引擎优化加载和解析。

• 使用 import 关键字导入模块，例如 import { something } from 'module_name'。
• 使用 export 关键字导出模块，例如 export function doSomething() { ... } 或 export default class MyClass{ ... }。

ESModules设计为可以异步加载，这使其更适合于用在浏览器环境中，不过Node.js现在也支持ESModules。

区别

1. 加载机制:

   • CommonJS：同步加载。
   • ESModules：可以异步加载，支持静态分析，预测性地进行代码的分割和按需加载。

2. 模块解析:

   • CommonJS 中，require 路径解析算法基于文件系统运作，并且可以省略文件后缀或指向文件夹。
   • ESModules 使用更为严格的路径，通常需要文件后缀，遵循 URL 语法。

3. 导出值:

   • CommonJS 导出的是值的拷贝，也就是说，一旦 require() 执行完毕，模块内部的变化不会影响这个值。
   • ESModules 导出的是绑定的引用，模块外部能够实时观察到模块内部的变化。

4. 模块上下文:

   • CommonJS 每个文件都是其模块的顶层作用域。
   • ESModules 顶层 this 是 undefined，

应用场景

CommonJS 和 ESModules 由于它们各自的特点，在不同的应用场景下会有所偏好。下面列举了它们的典型应用场景：

CommonJS 的应用场景：

• Node.js服务端开发：由于服务端代码不需要考虑浏览器端的下载和延迟问题，CommonJS 的同步加载特性在服务端是完全可行的。同时，绝大多数Node.js的生态系统（npm上的包）都是基于CommonJS规范的。
• 旧项目维护：早期的Node.js项目都是基于CommonJS规范的，所以维护旧项目往往意味着继续使用CommonJS。
• 需要动态计算或条件加载模块的情况：由于CommonJS 支持运行时同步加载，你可以根据某些运行时计算的条件来要求模块。

ESModules 的应用场景：

• 现代化前端开发：如使用框架（例如React、Vue、Angular）和工具（如Webpack、Rollup、Parcel）构建项目。ESModules 支持动态导入（import()）和静态代码分析，这有利于前端工具进行代码拆分，以懒加载的方式优化应用加载性能。
• 跨环境的代码共享：比如同时在Node.js和现代浏览器中运行的库或工具。ESModules是JavaScript官方的模块系统，现代浏览器原生支持。
• 新项目开发：创建新的Node.js项目时，倾向于使用ESModules，因为它是ECMAScript规范的一部分，并且Node.js及其生态系统正在向ESModules过渡。
• 需要利用静态分析来进行Tree-shaking优化的项目：Tree-shaking是一种只打包必要模块代码的方法，它依赖于ESModules的静态结构。

混合场景：

• 迁移的项目：如果你的项目计划从CommonJS迁移到ESModules，你可能会临时进入混合状态，这时要注意不同模块系统间的互操作。
• 使用第三方库：当需要在ESModules项目中使用仅提供CommonJS模块的第三方库时，也会出现混合使用。

Node.js已经提供了某些语法糖和特性来平滑CommonJS到ESModules的过渡，如import()动态导入语法来异步加载CommonJS模块等。

选择使用CommonJS还是ESModules很大程度上依赖于项目的目标环境、工具链支持、代码库的现状以及个人或团队的偏好。随着技术演进，社区正在向ESModules靠拢，但在稳定性、交付和兼容性要求很高的情况下，CommonJS仍然是一个合理而且可靠的选择。

使用示例

CommonJS

导出示例：

// myModule.js
const myFunction = () => {
    console.log('Hello, CommonJS!');
}
// 给exports对象添加属性
exports.myFunction = myFunction;
1
2
3
4
5
6

导入示例：

// app.js
const myModule = require('./myModule.js');
myModule.myFunction(); // 输出: 'Hello, CommonJS!'
1
2
3

ESModules

导出示例：

// myModule.js
export const myFunction = () => {
    console.log('Hello, ESModules!');
}
1
2
3
4

导入示例：

// app.js
import { myFunction } from './myModule.js';
myFunction(); // 输出: 'Hello, ESModules!'
1
2
3

此外，下面的示例说明了CommonJS如何在运行时加载模块，而ESModules则在编译时加载模块。

CommonJS 运行时加载

// 假设我们在运行代码之前并不知道我们需要加载的模块版本，我们可以在运行时动态地确定。
let version = 'v1';
if (someCondition) {
    version = 'v2';
}
const module = require(`./module${version}.js`);
1
2
3
4
5
6

ESModules 编译时加载

// 在ESModules中，不能这样动态加载模块，因为所有的import都会在编译时被处理。
// 下面的代码无法运行，会提示错误。
let version = 'v1';
if (someCondition) {
    version = 'v2';
}
// 报错
import module from `./module${version}.js`;
1
2
3
4
5
6
7
8

ESModules 动态加载

但是，ESModules 提供了一种动态导入的方法，可以在运行时异步加载模块：

let version = 'v1';
if (someCondition) {
    version = 'v2';
}
import(`./module${version}.js`) 
    .then(module => {
        // 使用模块
    })
    .catch(err => {
        // 处理加载错误
    });
1
2
3
4
5
6
7
8
9
10
11

在这个例子中，import() 返回一个 Promise，加载完模块后会被解析，因此动态导入必须在 Promise 或 async/await 上下文中处理。