更新时间：2024-03-29 13:13作者：小乐
我读过很多关于这个主题的文章，但其中很多都不清楚，而且我总是抓住要点。下面我们就来总结一下，免得大家再困惑。最初，JavaScript 无法导入/导出模块。这是一个大问题。想象一下如果要求您将所有代码写入一个文件中会发生什么。你愿意维护它吗？然后一些天才想到了一种不同的方法将模块系统引入JavaScript。最著名的是这些，CJS、AMD、UMD、ESM。我们从语法、用途和基本行为这几个方面一一介绍一下。 CJSCJS 是CommonJS 的缩写。如下图所示：
如果你使用过Node.js，你应该熟悉这个语法。它是Node.js 的模块系统。 CJS同步导入模块。您可以从文件或node_modules 导入模块。以下两者都可以使用CJS 导入。它将为您提供导入对象的副本。 CJS不被浏览器支持，只能在后端使用。如果要在前端使用，必须先编译打包。 AMDAMD 是异步模块定义的缩写。示例代码如下：
或者
AMD 以异步方式引入模块。 AMD是为前端而设计的。语法不如CJS 直观。 UMDUMD 是通用模块定义的缩写。示例代码如下：
UMD可以在前端和后端工作。 （我猜这就是Universal、通用的由来）UMD更像是一种配置多模块系统的模式。 UMD通常用于打包工具打包后的代码实现，例如Rollup/Webpack等。ESMESM代表EcmaScript Module。它是JavaScript规范提出的最新模块系统。您一定见过类似这样的代码：
现代浏览器本身就支持ESM。它具有简单的语法（如CJS）并且是异步导入的（如AMD）。它具有两者的共同优点。由于ES6的静态模块结构，它可以进行tree-shakeable。那些打包工具，比如Rollup，可以帮助你删除无用的代码，这样你就可以获得更精简的构建，从而提高性能。也可以用在HTML 中，总结如下
ESM是最好的模块系统。它具有简单的语法，本质上是异步的，并且可以用作Tree-shakeableUMD 前端和后端。它可以用作不支持ESM 环境的替代系统。 CJS是同步的，可以在后端使用。 AMD是异步的，可以用在前端。