JS CommonJS 与 ESM 互操作性：模块化体系的兼容策略

咳咳，各位靓仔靓女们，今天咱们聊点刺激的，关于JavaScript模块化世界里的爱恨情仇——CommonJS（CJS）与ECMAScript Modules（ESM）的互操作性。别怕，这玩意儿听着吓人，其实就是两伙人用不同的方式盖房子，现在想让他们互相串门，该怎么搞？

开场白：模块化的江湖

话说在JavaScript的世界里，一开始大家都是把代码一股脑儿塞到一个HTML文件里，就像原始社会，简单粗暴。后来代码越来越多，维护起来简直是噩梦。于是，模块化应运而生，就像古代的诸侯割据，把代码分成一个个独立的模块，各管一摊，互不干扰。

CommonJS和ESM就是这江湖上的两大门派。CommonJS是Node.js的御用模块化规范，而ESM则是JavaScript官方钦定的未来标准。这两大门派各有一套自己的规矩，想要让他们和平共处，互相理解，就得讲究策略。

第一章：认识一下CJS和ESM

要解决互操作性问题，首先得了解这两位老兄的脾气秉性。

1. CommonJS (CJS)

• 出身: 主要用于Node.js环境。
• 语法: 使用require()导入模块，module.exports或exports导出模块。
• 加载方式: 动态加载，在运行时才确定依赖关系。
• 特点:
  • 同步加载。Node.js环境可以同步读取文件，所以CJS可以同步加载模块。
  • 模块缓存。模块只会被加载一次，后续直接从缓存中读取。
  • exports是指向module.exports的引用。如果直接给exports赋值，会断开引用关系。

举个例子：

// 模块A (moduleA.js)
module.exports = {
  name: 'Module A',
  sayHello: function() {
    console.log('Hello from Module A!');
  }
};

// 模块B (moduleB.js)
const moduleA = require('./moduleA');

console.log(moduleA.name); // 输出: Module A
moduleA.sayHello(); // 输出: Hello from Module A!

2. ECMAScript Modules (ESM)

• 出身: JavaScript官方标准，适用于浏览器和Node.js环境。
• 语法: 使用import导入模块，export导出模块。
• 加载方式: 静态加载，在编译时就确定依赖关系。
• 特点:
  • 异步加载。浏览器环境必须异步加载模块，所以ESM是异步加载。
  • 更严格的语法。ESM的语法更加严格，例如必须显式声明导出的变量。
  • 更好的性能。静态加载可以进行优化，例如tree-shaking，减少最终代码体积。

举个例子：

// 模块C (moduleC.js)
export const name = 'Module C';

export function sayHello() {
  console.log('Hello from Module C!');
}

// 模块D (moduleD.js)
import { name, sayHello } from './moduleC.js';

console.log(name); // 输出: Module C
sayHello(); // 输出: Hello from Module C!

总结一下：

特性	CommonJS (CJS)	ECMAScript Modules (ESM)
适用环境	Node.js	浏览器和Node.js
导入语法	require()	import
导出语法	module.exports	export
加载方式	动态加载	静态加载
加载时机	运行时	编译时
是否同步加载	是	否

第二章：互操作性的挑战

CJS和ESM就像两个说不同方言的人，直接交流肯定会有问题。主要挑战在于：

1. 加载方式不同： CJS是同步加载，ESM是异步加载。这导致CJS模块无法直接在ESM模块中使用，反之亦然。
2. 导出方式不同： CJS使用module.exports和exports，ESM使用export。这导致两种模块的导出格式不兼容。
3. 顶层await： ESM支持顶层await，可以在模块的顶层使用await关键字。CJS不支持顶层await。

第三章：互操作性的策略

既然知道了挑战，那就要想办法解决。下面介绍几种常见的互操作性策略：

1. 在ESM中使用CJS模块

• Node.js的import语句： 在Node.js 14.x及以上版本中，可以使用import语句直接导入CJS模块。Node.js会自动将CJS模块转换为ESM模块。

  // ESM模块 (index.mjs)
  import moduleA from './moduleA.js'; // moduleA.js是CJS模块
  
  console.log(moduleA.name);
  moduleA.sayHello();

  注意： 为了让Node.js知道这是一个ESM模块，你需要：

  • 使用.mjs扩展名。
  • 在package.json中设置"type": "module"。

• createRequire： 如果你需要在ESM模块中使用require函数，可以使用module.createRequire创建一个require函数。

  // ESM模块 (index.mjs)
  import { createRequire } from 'module';
  const require = createRequire(import.meta.url);
  
  const moduleA = require('./moduleA.js'); // moduleA.js是CJS模块
  
  console.log(moduleA.name);
  moduleA.sayHello();

2. 在CJS中使用ESM模块

• import() 动态导入： CJS模块可以使用import()函数动态导入ESM模块。import()函数返回一个Promise，需要使用then()或async/await来处理结果。

  // CJS模块 (index.js)
  async function loadModule() {
    const moduleC = await import('./moduleC.js'); // moduleC.js是ESM模块
  
    console.log(moduleC.name);
    moduleC.sayHello();
  }
  
  loadModule();

  注意： 即使在CJS中，import()仍然是异步的。

• 使用转译器（Transpiler）： 可以使用Babel等转译器将ESM模块转换为CJS模块。

  npm install --save-dev @babel/core @babel/cli @babel/preset-env

  在babel.config.js中配置：

  module.exports = {
    presets: [
      ['@babel/preset-env', {
        modules: 'commonjs' // 将ESM转换为CJS
      }]
    ]
  };

  然后使用Babel进行转译：

  npx babel ./moduleC.js -o ./moduleC.cjs.js

  现在你就可以在CJS模块中使用require('./moduleC.cjs.js')来导入转换后的ESM模块了。

3. 通用模块定义（UMD）

UMD是一种兼容CJS、AMD和全局变量的模块化方案。它可以让你编写一份代码，同时在多种环境下使用。

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['exports'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    factory(exports);
  } else {
    // 浏览器全局变量
    factory(root.MyModule = {});
  }
}(typeof self !== 'undefined' ? self : this, function (exports) {
  exports.name = 'My UMD Module';

  exports.sayHello = function() {
    console.log('Hello from UMD!');
  };
}));

UMD模块会自动检测当前环境，并选择合适的加载方式。但是，UMD的缺点是代码比较冗余，而且需要在运行时进行检测，性能不如原生ESM。

4. 使用构建工具

像Webpack、Rollup、Parcel这样的构建工具，可以自动处理CJS和ESM之间的互操作性问题。它们可以：

• 将CJS模块转换为ESM模块。
• 将ESM模块转换为CJS模块。
• 进行tree-shaking，减少最终代码体积。
• 生成兼容多种环境的bundle。

使用构建工具是处理互操作性问题最常用的方法。

第四章：实战演练

下面我们通过一个简单的例子来演示如何使用Webpack处理CJS和ESM的互操作性问题。

项目结构：

my-project/
├── src/
│   ├── moduleA.js (CJS)
│   └── moduleC.js (ESM)
├── index.js (CJS)
└── webpack.config.js

moduleA.js (CJS):

module.exports = {
  name: 'Module A',
  sayHello: function() {
    console.log('Hello from Module A!');
  }
};

moduleC.js (ESM):

export const name = 'Module C';

export function sayHello() {
  console.log('Hello from Module C!');
}

index.js (CJS):

const moduleA = require('./src/moduleA');
import('./src/moduleC.js')
  .then(moduleC => {
    console.log(moduleA.name);
    moduleA.sayHello();

    console.log(moduleC.name);
    moduleC.sayHello();
  });

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'development' // 或者 'production'
};

步骤：

1. 安装Webpack:

   npm install webpack webpack-cli --save-dev

2. 运行Webpack:

   npx webpack

3. 在HTML文件中引入bundle.js:

   <!DOCTYPE html>
   <html>
   <head>
     <title>Webpack Demo</title>
   </head>
   <body>
     <script src="./dist/bundle.js"></script>
   </body>
   </html>

打开HTML文件，你将在控制台中看到：

Module A
Hello from Module A!
Module C
Hello from Module C!

Webpack会自动处理CJS和ESM之间的互操作性问题，将它们打包成一个可以在浏览器中运行的bundle。

第五章：最佳实践

• 尽量使用ESM： ESM是未来的趋势，尽量使用ESM编写新的模块。
• 逐步迁移： 如果你的项目中有大量的CJS模块，可以逐步将它们迁移到ESM。
• 使用构建工具： 使用Webpack、Rollup等构建工具可以简化互操作性问题。
• 注意兼容性： 确保你的代码在不同的环境（浏览器、Node.js）中都能正常运行。
• 测试： 编写测试用例，确保互操作性策略有效。

第六章：一些高级技巧

• __filename 和 __dirname 的替代方案： 在 ESM 中，__filename 和 __dirname 不可用。可以使用 import.meta.url 来获取模块的 URL，然后使用 URL 和 path 模块来获取文件名和目录名。

  import { fileURLToPath } from 'url';
  import { dirname } from 'path';
  
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = dirname(__filename);
  
  console.log(__filename);
  console.log(__dirname);

• package.json 的 exports 字段： package.json 的 exports 字段可以用来定义模块的导出方式，可以同时支持 CJS 和 ESM。

  {
    "name": "my-module",
    "version": "1.0.0",
    "exports": {
      "require": "./dist/my-module.cjs.js",
      "import": "./dist/my-module.esm.js"
    }
  }

  这样，在使用 require('my-module') 时会加载 CJS 版本，在使用 import 'my-module' 时会加载 ESM 版本。

• 动态 import 的错误处理： 动态 import 返回一个 Promise，需要处理可能发生的错误。

  async function loadModule() {
    try {
      const moduleC = await import('./moduleC.js');
      console.log(moduleC.name);
      moduleC.sayHello();
    } catch (error) {
      console.error('Failed to load module:', error);
    }
  }
  
  loadModule();

总结：

CJS和ESM的互操作性是一个复杂的问题，但只要掌握了正确的策略和工具，就可以轻松应对。记住，ESM是未来的趋势，尽量使用ESM编写新的模块，并逐步将现有的CJS模块迁移到ESM。构建工具是你的好帮手，它们可以自动处理互操作性问题，让你专注于业务逻辑。

好了，今天的讲座就到这里。希望大家以后在模块化的江湖里，能够游刃有余，盖出更漂亮的房子！散会！