有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

js umd前端JavaScript(CJS,AMD,UMD,ESM,)一次性搞懂

javascript 炮渣日记 2周前 (11-22) 14次浏览 已收录 0个评论 扫描二维码

看了不少关于这个话题的文章,很多都说不清楚,老是Get不到重点。下面就把他们总结一下,让大家不再疑惑。

开始的时候,JavaScript没有import/export 模块的方法。这是个很大的问题,想想如果现在让你把所有代码写在一个文件里,会是什么情况,你愿意去维护么?

然后一些天才想了不同的方法把模块系统引入了JavaScript。最出名的就是这些,CJS, AMD, UMD, ESM

下面来从这些方面一一介绍他们:语法,目的和基本的行为。

CJS

CJS是CommonJS的缩写。它看起来像下图:

js umd前端JavaScript(CJS,AMD,UMD,ESM,)一次性搞懂
  • 如果你用过Node.js的话,应该很熟悉这种语法,它就是Node.js的模块系统
  • CJS是同步引入模块
  • 你可以从一个文件,或者node_modules引入模块,下面两种都可以
js umd前端JavaScript(CJS,AMD,UMD,ESM,)一次性搞懂
  • 当使用CJS引入,它会给你一个被引入对象的拷贝
  • CJS不被浏览器支持,只能用于后端。如果要在前端使用,必须要先被编译和打包。

AMD

AMD是Asynchronous Module Definition的缩写。示例代码如下:

js umd前端JavaScript(CJS,AMD,UMD,ESM,)一次性搞懂

或者

js umd前端JavaScript(CJS,AMD,UMD,ESM,)一次性搞懂
  • AMD是通过异步的方式引入模块的
  • AMD是为前端设计的
  • AMD 语法不如 CJS 直观

UMD

UMD是Universal Module Definition的缩写,示例代码如下:

js umd前端JavaScript(CJS,AMD,UMD,ESM,)一次性搞懂
  • UMD可以在前端后端同时工作。(估计这就是Universal的由来吧,通用
  • UMD更像是一种配置多个模块系统的模式。
  • UMD通常用于打包工具打包后的代码实现,比如Rollup/Webpack之类的

ESM

ESM代表EcmaScript Module。它是JavaScript规范最新提出的模块系统。你肯定见过这种样子的代码:

js umd前端JavaScript(CJS,AMD,UMD,ESM,)一次性搞懂

js umd前端JavaScript(CJS,AMD,UMD,ESM,)一次性搞懂
  • ESM被现代浏览器原生支持
  • 它语法简单(像CJS),并且是异步导入(像AMD),有它俩共同的优点
  • 由于ES6的静态模块结构,它可以做Tree-shakeable。那些打包工具,比如Rollup可以帮你删掉无用代码,这样你就能得到更精简的build,从而提高性能。
  • 它还可以被使用在HTML里,比如下面这样
js umd前端JavaScript(CJS,AMD,UMD,ESM,)一次性搞懂

总结

  • ESM 是最好的模块系统。它语法简单,原生异步并且可以Tree-shakeable
  • UMD 前后端通用,可以作为不支持ESM环境的替代系统。
  • CJS 是同步的,可以在后端使用。
  • AMD 是异步的,可以在前端使用。
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址