commonjs 和 ES Module

1. CommonJS (CJS)

是什么？
CommonJS 是为 服务器端 设计的模块化规范，最著名的实现就是 Node.js。它的诞生远早于浏览器原生支持模块化。

核心思想：
通过 require 来同步加载模块，通过 module.exports 或 exports 来导出模块。

工作原理与特性：

1. 同步加载 (Synchronous)：  当你执行 const fs = require('fs'); 时，Node.js 会暂停后续代码的执行，去磁盘上找到 fs 模块，执行它，然后返回 module.exports 的值。这个过程是阻塞的。

   • 为什么是同步？  因为在服务器上，所有模块文件都在本地硬盘，读取速度非常快，同步加载的开销很小，且实现简单。

2. 模块输出的是值的浅拷贝：  当一个模块被 require 时，它会执行一次，然后将其 module.exports 的结果缓存起来。之后再次 require 同一个模块，会直接从缓存中读取。导出的如果是原始类型（如 string, number），那么导入的是这个值的拷贝。如果是对象，则是对象引用的拷贝。

   • 关键点：  一旦导出，模块内部的变化不会影响到已经导入的值（除非导出的是对象，然后修改对象的属性）。

3. 运行时加载 (Runtime Loading)：  require 是一个函数，你可以在代码的任何地方调用它，甚至可以动态拼接路径（虽然不推荐）。模块的依赖关系在代码执行时才确定。

模块导出的是对象的引用，所以修改对象属性时会影响到其他 require 该模块的地方。而原始值则是拷贝传递的，不会受到影响。

如果模块导出的是对象或数组（即引用类型），那么修改导入模块中的内容会影响原模块中导出的内容，因为导入的模块是原对象或数组的引用。

如果模块导出的是原始数据类型（如 number, string, boolean 等），修改导入模块的内容不会影响原模块中的值。因为在 require 时，Node.js 会把这些值拷贝给导入模块，而不是引用它们。

ES Module (ESM)

是什么？
ES Module 是 ECMAScript 官方标准 的模块化方案，旨在统一浏览器和服务器端的模块化体验。它是现代 JavaScript 的标准。

核心思想：
通过 import 关键字导入模块，通过 export 关键字导出模块。

工作原理与特性：

1. 异步加载 (Asynchronous)：  ESM 的设计初衷就考虑了浏览器环境，模块可能需要通过网络加载，因此其底层设计是异步的。浏览器会解析依赖关系，并行下载文件，然后按顺序执行。

   • 为什么是异步？  为了不阻塞浏览器渲染，提升用户体验。

2. 静态解析 (Static Analysis)：  import 和 export 语句必须在模块的顶层，不能在条件语句、循环或函数中。

   • 为什么是静态？  这使得构建工具（如 Webpack, Vite）可以在编译时就确定模块的依赖关系图，而无需执行代码。这是实现 Tree Shaking (摇树优化，即移除未使用的代码) 的基础。

3. 模块输出的是值的实时绑定 (Live Binding)：  ESM 导出的是一个**引用或绑定**，而不是一个值的浅拷贝。如果导出模块内部的变量值发生改变，导入该模块的地方也能感知到这个变化。