commonjs和es module的区别

CommonJS 和 ES Module（ESM）是两种不同的模块化系统，它们有以下区别：

1. 语法差异：

   • CommonJS 使用 require() 导入模块，使用 module.exports 或 exports 导出模块。
   • ESM 使用 import 导入模块，使用 export 导出模块。

// math.js
function add(a, b) {
  return a + b;
}
//导出方式1
module.exports = {
  add: add
};
//导出方式2
exports.add = add;

1. 加载方式：

   • CommonJS 模块是同步加载的，在运行时动态加载模块。
   • ESM 是静态加载的，在编译时确定模块的依赖关系。
   • 静态加载就是编译时把模块关系就弄好了，动态加载就是在运行时发现需要其他模块才进行导入。

2. 浏览器兼容性：

   • CommonJS 最初是为服务器端设计的，Node.js 支持 CommonJS 模块。
   • ESM 是 ECMAScript 标准的一部分，现代浏览器和 Node.js 已经开始原生支持 ESM。

3. 模块作用域：

   • CommonJS 模块是运行时加载，模块加载运行后会被缓存，第二次引用同一个模块会得到缓存的实例。
   • ESM 模块是在编译时加载的，每个模块都有自己独立的作用域，每次引用都会重新执行模块。

总的来说，CommonJS 更适用于服务器端和同步加载的环境，而ESM 更适用于浏览器端和异步加载的环境。然而，随着现代 JavaScript 开发的发展，ESM 的使用越来越普遍，并且在许多场景中成为首选的模块化方案。