ES6之前，JS一直没有自己的 模块体系，这一点对于大型项目的开发很不友好，所以社区出现了 CommonJS和 AMD（本人不熟悉）， CommonJS主要是用于 服务器（Node）， AMD主要是用于 浏览器。
但是ES6引入了 ESM，到此，JS终于有了自己的 模块体系，基本上可以 完全取代CJS和AMD。
下面简单总结一下 ESM以及 ESM和CJS的区别。
一、CJS
CJS 是 CommonJS 的缩写。主要用于服务器端，主要使用如下：
二、ESM
ESM是 ESModule，是 ECMAScript自己的模块体系，是 Javascript 提出的实现一个标准模块系统的方案，于ES6引入， 代表 ES 模块。主要使用如下：
可以在 HTML 中调用，只要如下
它兼具两方面的优点：具有 CJS 的简单语法和 AMD 的异步
三、区别
使用方式不同（以上）； CJS 不能在浏览器中工作。它必须经过转换和打包
commonJs是被加载的时候运行，esModule是编译的时候运行
commonJs输出的是值的浅拷贝，esModule输出值的引用
commentJs具有缓存。在第一次被加载时，会完整运行整个文件并输出一个对象，拷贝（浅拷贝）在内存中。下次加载文件时，直接从内存中取值
commonJs 输出值拷贝
esModule 输出值引用
ES6 模块加载 CommonJS 模块
module.exports 等同于 export default 可以用 import 引入
CommonJS 模块加载 ES6 模块
CommonJS 模块加载 ES6 模块，不能使用require命令，而要使用import()函数。
module.exports 默认值为{}
exports 是 module.exports 的引用
exports 默认指向 module.exports 的内存空间
require() 返回的是 module.exports 而不是 exports
若对 exports 重新赋值，则断开了 exports 对 module.exports 的指向
引用：
require 和 import 都可引用
module.exports
exports
四、其他模式
AMD
AMD 代表异步模块定义。下面是一个示例代码
AMD 是异步(asynchronously)导入模块的(因此得名)
一开始被提议的时候， AMD 是为前端而做的(而 CJS 是后端)
AMD 的语法不如 CJS 直观。我认为 AMD 和 CJS 完全相反
UMD
UMD 代表通用模块定义（ Universal Module Definition）。
在前端和后端都适用（”通用”因此得名）
与 CJS 或 AMD 不同，UMD 更像是一种配置多个模块系统的模式。
当使用 Rollup/Webpack 之类的打包器时， UMD 通常用作备用模块
Original: https://www.cnblogs.com/h-c-g/p/15397942.html
Author: 一心二念
Title: Javascript 中的 CJS, AMD, UMD 和 ESM是什么
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/535974/
转载文章受原作者版权保护。转载请注明原作者出处！