📝 引入

• 在 JavaScript 中，模块化是指将代码分成小的、可重用的模块。

• 不同的模块系统允许我们以不同的方式组织和管理代码。

• 两种最常见的模块系统是 ES 模块（ESM）和 CommonJS 模块（CJS）。

😋 ES 模块（ESM）

ES 模块是 ECMAScript 6（ES6，2015）引入的现代模块系统，在现代浏览器和 Node.js 中都可用。通过静态分析 import 和 export 声明模块依赖关系。

• 特点：
• 静态分析：模块关系在编译时确定，可以优化和进行错误检查。
• 作用域：每个模块都是私有的，默认不泄漏任何全局变量。
• 异步加载：模块导入是异步的，支持浏览器中的动态 import。

• 关键语法：
• export：从模块中导出变量、函数或类。
• import：导入其他模块中导出的内容。

• 示例：

CommonJS 模块（CJS）

CommonJS 模块系统最初在 Node.js 中实现，是 Node.js 默认的模块化标准。使用 require 和 module.exports 语法。

• 特点：
• 同步加载：适用于服务器端环境，不适合浏览器环境。
• 作用域：每个模块独立封装，不泄漏全局作用域。
• 灵活导出：module.exports 可导出任何类型的数据（对象、函数、类等）。

• 关键语法：
• module.exports：导出一个模块。
• require：从另一个文件中引入模块。

• 示例：

注意事项

• 兼容性：ES 模块支持浏览器和 Node.js，而 CommonJS 默认仅在 Node.js 中可用。

• 混用：在 Node.js 中，可以通过配置使用 ES 模块，也可使用转换工具如 Babel 进行转换。

• 导出方式：
• ES 模块支持多个命名导出和默认导出；
• CommonJS 只能导出一个对象或函数。

选择哪种模块系统？

• 浏览器：使用 ES 模块是标准方式，且支持 <script type="module"> 标签。

• Node.js：ES 模块逐渐成为首选，但 CommonJS 仍被广泛使用，特别是兼容旧版本代码时。

😇 参考\推荐

Documentation - Modules

How JavaScript handles communicating across file boundaries.

https://www.typescriptlang.org/docs/handbook/2/modules.html