前端框架三大框架，前端工程师主要做什么工作
我读过很多关于这个主题的文章，但其中很多都不清楚并且总是抓住要点。我将在下面总结一下，以免您感到困惑。最初，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 模块。这是JavaScript 规范中提出的最新模块系统。您可能见过这样的代码：
现代浏览器原生支持ESM。它具有简单的语法（例如CJS）并且异步导入（例如AMD）。两者都有共同的优点。 ES6 的静态模块结构允许进行树形抖动。 Rollup 等打包工具允许您删除不必要的代码，使您的构建更加简化并提高性能。它也可以用在HTML 中，总结如下。
ESM 是最好的模块化系统。它具有简单的语法，本质上是异步的，可以用作Tree-shakeableUMD前端和后端，并且可以用作不支持ESM环境的替代系统。 CJS是同步的，可以在后端使用。 AMD是异步的，可以用在前端。
