CommonJS和ESM：JavaScript模块化规范对比

在现代的JavaScript开发中，模块化是一个至关重要的概念，它有助于将代码拆分为独立的、可维护的部分，使开发过程更加高效和可靠。在JavaScript社区中，有两种主要的模块化规范：CommonJS（通用模块化规范）和ESM（ECMAScript模块）规范。本文将深入探讨这两种规范的异同点、应用场景以及注意事项。

公众号：Code程序人生，个人网站：https://creatorblog.cn

CommonJS规范

CommonJS是一种早期引入的模块化规范，最初用于服务器端JavaScript（如Nodejs）。它的主要特点包括：

• 同步加载模块： CommonJS模块是同步加载的，即在需要的地方使用require函数加载模块，并立即获取其导出内容。
• 导出方式： 使用module.exports导出模块内容，或者通过给exports对象添加属性来导出单个成员

姿势一：module.exports集中导出

// 导出
// utils.js
module.exports = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b
};

// 导入
// app.js
const { add, subtract } = require('./utils');
console.log(add(5, 3)); // 输出: 8
console.log(subtract(5, 3)); // 输出: 2

姿势二：exports逐个导出

// 导出
// utils.js
exports.add = (a, b) => a + b;
exports.subtract = (a, b) => a - b;

// 导入
// app.js
const { add, subtract } = require('./utils');
console.log(add(5, 3)); // 输出: 8
console.log(subtract(5, 3)); // 输出: 2

姿势三：直接赋值给module.exports

// 导出
// utils.js
module.exports = (a, b) => a + b;

// 导入
// app.js
const add = require('./utils');
console.log(add(5, 3)); // 输出: 8

ESM规范

ESM是ECMAScript官方引入的模块化规范，它在现代浏览器和Nodejs中都得到了广泛支持。它的主要特点包括：

• 异步加载模块： ESM模块是异步加载的，模块需要使用import语句加载，可以在运行时动态加载模块。
• 导出方式： 使用export关键字导出模块内容，可以导出多个成员，也可以起别名。

姿势一：export命名导出

使用export关键字，可以命名导出一个或多个成员，这些成员在导入时需要使用相应的名称来访问。

// 导出
// utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// 导入
// app.js
import { add, subtract } from './utils';
console.log(add(5, 3)); // 输出: 8
console.log(subtract(5, 3)); // 输出: 2

姿势二：export default默认导出

使用export default关键字，可以导出一个默认成员，一个模块只能有一个默认导出。

// 导出
// utils.js
const add = (a, b) => a + b;
export default add;

// 导入
import add from './utils';
console.log(add(5, 3)); // 输出: 8

在导入时，可以自定义默认导出成员的名称：

// 导入并重命名
import myAddFunction from './utils';
console.log(myAddFunction(5, 3)); // 输出: 8

姿势三：export + export default 混合导出

在一个模块中，既可以有命名导出，又可以有默认导出。

// 导出
// utils.js
export function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

export default subtract;

// 导入
// app.js
import subtract, { add } from './utils';
console.log(add(5, 3)); // 输出: 8
console.log(subtract(5, 3)); // 输出: 2

姿势四：重新导出

可以在一个模块中重新导出另一个模块的成员，方便从一个中心模块导出所有需要的内容。

// 导出一
// mathUtils.js
export function add(a, b) {
  return a + b;
}

// 导出二
// utils.js
export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

// 引入后重新集中导出
// main.js
export { add } from './mathUtils';
export { subtract, multiply } from './utils';

// 导入
// app.js
import { add, subtract, multiply } from './main';
console.log(add(5, 3)); // 输出: 8
console.log(subtract(5, 3)); // 输出: 2
console.log(multiply(5, 3)); // 输出: 15

姿势五：全部导入

使用import * as <alias>语法，可以将一个模块的所有导出成员导入为一个对象。

// 导出
// utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// 导入
// app.js
import * as math from './utils';
console.log(math.add(5, 3)); // 输出: 8
console.log(math.subtract(5, 3)); // 输出: 2

这些是ESM规范中常见的导出方式，通过灵活运用它们，可以更好地组织和管理模块化的JavaScript代码。

异同点对比

加载方式

• CommonJS使用同步加载模块，适合服务器端，但在浏览器中可能会造成阻塞。
• ESM使用异步加载模块，更适合浏览器环境，可以提高性能。

静态分析

• ESM可以在静态分析时确定模块依赖关系，这使得一些优化和工具更易实现。
• CommonJS在运行时才能确定依赖，限制了某些优化的可能性。

动态导入

• ESM允许使用import()函数在运行时动态加载模块，以支持按需加载。
• CommonJS没有原生的动态导入方式，尽管在Nodejs中可以使用实验性的import()函数。

应用场景

• CommonJS适用于服务器端应用，特别是在Nodejs环境中，可以方便地管理模块依赖。
• ESM适用于浏览器和现代Nodejs应用，尤其在前端项目中，可以利用浏览器的异步加载能力

注意事项

• 当在Nodejs中使用ESM规范时，需要在脚本文件中使用.mjs扩展名，并在package.json中设置"type": "module"。
• ESM中的模块路径解析相对于当前文件，而CommonJS中相对于包含模块的目录。
• ESM中的导入和导出是静态的，不能根据条件进行导入或导出，而CommonJS可以在运行时根据条件加载模块。

总结

CommonJS和ESM规范各有优势，选择取决于应用的环境和需求。

在Nodejs环境中，可以根据项目需求选择使用哪种规范，而在现代的浏览器环境中，ESM规范更加适用。

熟悉这两种规范的异同以及各自的应用场景，将有助于开发者更好地进行模块化开发并提高代码质量和可维护性。