说到 CJS, AMD, UMD 和 ESM 四者的区别，不得不提一下模块这个概念。
CJS
CJS（CommonJs） 适用于后端 Node。
Node 与 Javascript 最开始是没有模块这个概念的。相反，模块概念在 java 和 php 等却存在。为了方便对代码开发和管理，Node 首先提出了 CJS。
// util.js
module.exports = function dosomething(data) {
// todo
}
// main.js
const dosomething = require('./util.js')
CommonJs 是引入对象的一个拷贝，可以直接运行在后端环境中。故 CommonJs 在浏览器环境中是无效的，必须要经过编译和打包后才能在浏览器环境中执行。
AMD
AMD（asynchronous module definition） 适用于前端。
CommonJs 主要适用于服务器 Node，浏览器 Javascript 那时还没有 ESM。而开发人员也想实现浏览器代码模块化开发，随之诞生了 AMD。
AMD 使用 requirejs 库来实现，可以使用 require 与 define 两种方式加载依赖。
AMD是异步加载模块的，可以通过回调处理异步。
// dep1.js
define(['jquery', 'util'], function (jquery, util) {
var dosomething = function() {
};
return {
dosomething: dosomething
}
});
// dep2.js
define(['dep1'], function (dep1) {
// dep1.dosomething();
});
// require 也可以直接用来替换define。
// require(['dep1'], function (dep1) {
// dep1.dosomething();
// });
require 多用于解决循环依赖中，在运行时加载文件。
UMD
UMD（Universal Module Definition）适用于任何环境下使用。
与 CJS、AMD 不同，UMD是一种设计模式，可以同时适用于前端和后端这两种不同的模块形式。
很多小伙伴为避免问题，在打包时都会把打包模式改成 umd。并且在 ESM 不能使用的情况下也会选择 UMD。
// webpack.config.js
output: {
...
// 将你的 library 暴露为所有的模块定义下都可运行的方式
libraryTarget: 'umd',
}
// rollup.config.js
output: {
...
// 将你的 library 暴露为所有的模块定义下都可运行的方式
format: "umd",
}
ESM
ESM（ES Module）这是 Javascript 提出的实现一个标准模块系统的方案。
// util.js
export const dosomething () {
// todo
}；
// main.js
const { dosomething } = import('./util.js')
ESM 是近些年来常用的敲代码方式。
另，ESMScript 的出现，也使得在 script 中可以直接引用 ESM 文件。
<script src="./main.js" type="module"></script>
设置type=module ，会将加载的文件视为模块文件，识别模块的import语句并加载。
- ESM 可以替代 CJS 与 AMD，并且兼备 UMD 任何环境都可使用的特性。
- 自身的静态化特点，在编译时加载，使得页面加载速度快。
- 真正意义上做到了按需使用。使用 import 并不会直接执行模块，而是生成一个动态的只读引用，等到真的需要用到时，才会到模块里面去读取。
- 可以在 html 中直接使用，如下：
因为 ESM 独有的特性，目前 Rollup 与 Vite 已经在dev与打包中使用。<script type="module"> import { dosomething } from './util.js'; dosomething(); </script>
结语
感谢您的阅读！希望本文带给您有价值的信息。
如果对您有帮助，请「点赞」支持，并「关注」我的主页获取更多后续相关文章。同时，也欢迎「收藏」本文，方便以后查阅。
写作不易，我会继续努力，提供有意义的内容。感谢您的支持和关注！
