作者：AI助手
前端开发中有两种常用的模块化方案：ES Modules 和 CommonJS。虽然它们都是用来解决模块化问题的，但是在很多细节上都有所不同，本文将就这两种方案做一些详细的说明，并提供一些示例。
ES Modules
ES Modules 是 ECMAScript 6 引入的一种模块化规范，它以 import 和 export 关键字来定义和导出模块。
基本使用
为了使用 ES Modules，首先需要在 HTML 文件中使用 <script type="module"> 标签，这样浏览器就会按照 ES Modules 的规范执行 JS 代码。然后，可以使用 import 导入其它模块中的函数或变量，并使用 export 导出当前模块的函数或变量。
示例代码：
// math.js export function add(a, b) { return a + b; } // main.js import { add } from './math.js'; console.log(add(1, 2)); // 3
动态导入
ES Modules 还支持动态导入，也就是在代码运行过程中异步加载模块，这对于优化性能是很有帮助的。
示例代码：
// 在某个事件发生时才需要加载特定代码 button.addEventListener('click', async () => { const { default: module } = await import('./special-module.js'); module.doSomething(); });
命名导出和默认导出
不仅可以导出具体的函数或变量，ES Modules 还支持命名导出和默认导出两种方式。
命名导出可以在导出时为每个变量或函数指定一个名字。示例代码：
// math.js export const PI = 3.1415926; export function add(a, b) { return a + b; }
默认导出则是指把整个模块作为一个整体导出，需要使用 export default 关键字。示例代码：
// math.js export default { PI: 3.1415926, add(a, b) { return a + b; }, };
在导入时，可以为默认导出指定一个名称，后续使用时就可以用该名称代替整个模块。示例代码：
// main.js import calculator from './calculator.js'; console.log(calculator.add(1, 2)); // 3 console.log(calculator.PI); // 3.1415926
注意事项
ES Modules 与 CommonJS 最大的不同在于它默认是严格模式，即在导入和导出时不能使用 CommonJS 的 module.exports 和 require 函数，也不能使用 this 关键字。
CommonJS
CommonJS 是 Node.js 团队提出的一种模块化规范，它使用 module.exports 导出模块，使用 require() 导入模块。
基本使用
CommonJS 的使用非常简单，只需要在模块中使用 module.exports 导出需要公开的函数或变量，然后在其它模块中使用 require() 导入即可。
示例代码：
-- -------------------- ---- ------- -- ------- -------- ------ -- - ------ - - -- - -------------- - - --- -- -- ------- ----- - --- - - ------------------ ------------------ ---- -- -展开代码
动态导入
CommonJS 不支持动态导入，只能在模块加载时同步地导入其它模块。
注意事项
在 CommonJS 中，模块是同步加载的，即代码执行顺序和导入顺序是一致的。此外，CommonJS 不支持命名导出和默认导出，只能使用 module.exports 导出一个整体对象或函数。
ES Modules 和 CommonJS 的比较
ES Modules 和 CommonJS 的比较还是很复杂的，它们都有自己的特性和适用场景。下面就简单地比较一下它们的一些不同点：
1. 运行环境
ES Modules 是在浏览器中使用的标准，而 CommonJS 则是在 Node.js 等服务器端环境中使用的。
2. 加载方式
ES Modules 支持动态导入，而 CommonJS 只支持同步导入。
3. 导出方式
ES Modules 支持命名导出和默认导出，而 CommonJS 只支持整体导出。
4. 严格模式
ES Modules 默认是严格模式，不支持使用 CommonJS 的 module.exports 和 require()，也不能使用 this 关键字。
5. 浏览器兼容性
由于 ES Modules 是 HTML5 引入的新特性，在一些老的浏览器中可能会存在兼容性问题。而 CommonJS 则没有这种问题，因为它是在服务器端使用的。
如何选择
对于前端开发者来说，如果要在浏览器中使用模块化，那么 ES Modules 当然是首选。但如果你要在 Node.js 环境中使用模块化，那么就只能使用 CommonJS 了。
最后，如果你需要使用 ES Modules，但又要兼容老的浏览器，可以使用 Babel 将代码转换为 ES5 后使用。如果你刚开始着手一个新的项目，使用 ES Modules 是最好的选择。如果你需要扩展一个现有的项目，然后你要在服务端渲染其中的一些代码，那么 CommonJS 是唯一的选择。
结语
ES Modules 和 CommonJS 是前端开发中非常重要的模块化方案，它们各有优点和适用场景。了解这两种方案的不同点和特点，可以在实际开发中更加灵活地选择适合自己的方案，提高开发效率和代码可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c2ba14314edc2684c36187
