问题
CommonJS (CJS) 和 ES Modules (ESM) 是两种不同的模块系统，主要用于在 JavaScript 中组织和加载代码模块。
区别如下：
-
语法差异：CJS 使用
require()和module.exports进行模块导入和导出，而 ESM 使用import和export关键字。 -
加载方式：CJS 采用同步加载模块的方式，即在代码执行过程中按需加载模块。ESM 则采用异步加载模块的方式，即在模块加载过程中不会阻塞代码执行。
-
静态编译：ESM 模块是在静态阶段编译并分析模块的依赖关系，这使得编译器能够静态地确定模块之间的依赖关系。而 CJS 模块在运行时解析和执行，并且可以有条件地导入和导出模块。
-
导入和导出的特性：ESM 支持导入和导出命名的模块成员、默认导出和命名空间导入。CJS 则只支持整个模块的导入和导出。
-
浏览器支持：ESM 目前在现代浏览器中原生支持，但在较旧的浏览器中需要使用转译器（如Babel）进行转换。而 CJS 可以通过使用打包工具（如Webpack）将模块打包成浏览器可执行的代码。
需要注意的是，CJS 和 ESM 是两种不兼容的模块系统，因此在使用时需要根据具体情况选择合适的模块系统和相应的语法规则。在 Node.js 环境中，可以使用 CJS，而在现代浏览器环境中，可以使用 ESM。
举例
当使用 CommonJS 和 ES Modules 进行模块导入和导出时，下面是详细的示例：
- CommonJS (CJS) 示例：
在一个名为 math.js 的模块中，我们导出了两个函数 add 和 subtract：
// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
module.exports = {
add,
subtract
};
在另一个模块中，我们使用 require() 来导入 math.js 模块并使用其中的函数：
// app.js
const math = require('./math.js');
console.log(math.add(1, 2)); // 输出：3
console.log(math.subtract(5, 3)); // 输出：2
在上述示例中，math.js 模块中定义了两个函数 add 和 subtract，然后通过导出对象的方式将这两个函数暴露给外部使用。在 app.js 模块中，使用 require('./math.js') 导入 math.js 模块，然后通过 math.add 和 math.subtract 访问导出的函数。
- ES Modules (ESM) 示例：
在一个名为 math.js 的模块中，我们使用 export 关键字导出了两个函数 add 和 subtract：
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
在另一个模块中，我们使用 import 关键字来导入 math.js 模块并使用其中的函数：
// app.js
import { add, subtract } from './math.js';
console.log(add(1, 2)); // 输出：3
console.log(subtract(5, 3)); // 输出：2
在上述示例中，math.js 模块中通过 export 关键字将两个函数 add 和 subtract 导出，使其可以在其他模块中使用。在 app.js 模块中使用 import { add, subtract } from './math.js' 从 math.js 模块中导入具体的函数，然后可以直接使用 add 和 subtract 函数进行计算。
需要注意的是，在使用 ES Modules 时，需要在支持的环境中进行正确的配置和加载，例如在浏览器中使用 <script type="module" src="app.js"></script> 加载模块化的 JavaScript 文件。而在 Node.js 环境中，默认情况下是使用 CommonJS 模块系统，如果要使用 ES Modules，需要在文件扩展名为 .js 的文件中使用 import 和 export 关键字，并在执行文件时添加 --experimental-modules 参数或者将文件扩展名更改为 .mjs。
网友评论