CommonJs和ESM

2026-01-291 min read前端技术

javascript

!!!tip CommonJs（CommonJS）和ESMJs（通常简称为ESM，即ECMAScript Modules）是JavaScript中两种主要的模块化规范，它们在多个方面存在显著的区别。以下是它们之间主要差异的详细对比： !!!

CommonJS：主要适用于Node.js环境，是Node.js打包JavaScript代码的原始方法。
ESM (ECMAScript Modules)：是ECMAScript标准中定义的模块化规范，也称为ES6模块。它适用于现代浏览器和Node.js环境，是官方引入的模块化规范。

CommonJS：采用同步加载模块的方式。当使用require 函数加载模块时，会阻塞后续代码的执行，直到模块加载完成。这种方式在Node.js中较为合适，因为Node.js中的IO操作通常不是性能瓶颈。
ESM：支持异步加载模块。使用import语句加载模块时，可以在运行时动态加载模块，这有助于优化性能，特别是在浏览器环境中，网络请求是性能瓶颈。

CommonJS：使用module.exports或exports来导出模块内容,扩展名为.cjs的文件，通过require函数来导入模块。
- 当扩展名为.js的文件，且离自己最近的package.json文件包含一个顶级字段“type”，其值为“commonjs”；
- 扩展名为.js的文件，且离自己最近的package.json文件不包含一个顶级字段“type”(建议明确指定 type值，而不是不定义)；

示例（导出）：

javascript

  // 导出模块
  module.exports = {
    myFunction: function() { ... },
    myVariable: 'Hello, CommonJS!'
  };

示例（导入）：

javascript

  // 引入模块
  const myModule = require('./myModule');
  myModule.myFunction();
  console.log(myModule.myVariable);

ESM：使用export关键字来导出模块内容,扩展名为 .mjs 的文件；通过import语句来导入模块。
- 当扩展名为.js的文件，且离自己最近的package.json文件包含一个顶级字段“type”，其值为“module”，也会当做是 ESM.
示例（导出）：

javascript
1// 导出模块 2export function myFunction() { ... } 3export const myVariable = 'Hello, ES Modules!';

示例（导入）：

javascript
1// 引入模块 2import { myFunction, myVariable } from './myModule.js'; 3myFunction(); 4console.log(myVariable);