ESM 和 CommonJs 原理

首先都是用于管理和导出JavaScript模块的规范。

CommonJS 是 NodeJs 的规范。

ESM 是 ES6 中为了解决浏览器场景下的模块引入问题而产生的。

  • CommonJS是在运行时加载的，因为本质上CommonJS的require只是一个JS函数，只能在JS引擎执行代码时才生效，而ESM是在JS引擎进行静态解析的时候生效的。
  • CommonJS 模块多次引入，只会加载一次。每个module内部会存在一个loaded来确定是否被加载过.
  • CommonJS 代码是同步执行的。
  • 他是通过require 函数来导入的，只有在执行 JS 代码才会知道模块的依赖关系。
  • 导入导出是值的引用，如果导出的是一个基本数据类型值，那么导出文件改变该值，然后导入文件该变量的值也不会变。
  • 不能修改导入的 ESM模块非引用类型变量，会报错 Uncaught TypeError: Cannot assign to read only property 'name' of object '[object Module]'
  • 引用类型可以在外部改变
  • 内部异步改变的变量，外部导入的时候如果异步执行时发生改变将会得到改变后的值