原文地址:What are CJS, AMD, UMD, and ESM in Javascript?[1]
原文作者:Igor Irianto[2]
译者:Gopal
因为面试也经常问这个问题,所以加上了【面试说】标签。
最初,Javascript
没有导入/导出模块的方法, 这是让人头疼的问题。想象一下,只用一个文件编写应用程序——这简直是噩梦!
然后,很多比我聪明得多的人试图给 Javascript
添加模块化。其中就有 CJS
、AMD
、UMD
和 ESM
。你可能听说过其中的一些方法(还有其他方法,但这些是比较通用的)。
我将介绍它们:它们的语法、目的和基本行为。我的目标是帮助读者在看到它们时认出它们
CJS
CJS
是 CommonJS
的缩写。经常我们这么使用:
// importing
const doSomething = require('./doSomething.js');
// exporting
module.exports = function doSomething(n) {
// do something
}
很多人可以从 Node
中立刻认出CJS
的语法。这是因为Node
就是使用 `CJS` 模块[3]的CJS
是同步导入模块你可以从 node_modules
中引入一个库或者从本地目录引入一个文件 。如const myLocalModule = require('./some/local/file.js')
或者var React = require('react');
,都可以起作用当 CJS
导入时,它会给你一个导入对象的副本CJS
不能在浏览器中工作。它必须经过转换和打包
AMD
AMD
代表异步模块定义。下面是一个示例代码
define(['dep1', 'dep2'], function (dep1, dep2) {
//Define the module value by returning a value.
return function () {};
});
或者
// "simplified CommonJS wrapping" https://requirejs.org/docs/whyamd.html
define(function (require) {
var dep1 = require('dep1'),
dep2 = require('dep2');
return function () {};
});
AMD
是异步(asynchronously
)导入模块的(因此得名)一开始被提议的时候, AMD
是为前端而做的(而CJS
是后端)AMD
的语法不如CJS
直观。我认为AMD
和CJS
完全相反
UMD
UMD
代表通用模块定义(Universal Module Definition
)。下面是它可能的样子(来源[4])
(function (root, factory) {
if (typeof define === "function" && define.amd) {
define(["jquery", "underscore"], factory);
} else if (typeof exports === "object") {
module.exports = factory(require("jquery"), require("underscore"));
} else {
root.Requester = factory(root.$, root._);
}
}(this, function ($, _) {
// this is where I defined my module implementation
var Requester = { // ... };
return Requester;
}));
在前端和后端都适用(“通用”因此得名) 与 CJS
或AMD
不同,UMD
更像是一种配置多个模块系统的模式。这里[5]可以找到更多的模式当使用 Rollup/Webpack
之类的打包器时,UMD
通常用作备用模块
ESM
ESM
代表 ES
模块。这是 Javascript
提出的实现一个标准模块系统的方案。我相信你们很多人都看到过这个:
import React from 'react';
或者其他更多的
import {foo, bar} from './myLib';
...
export default function() {
// your Function
};
export const function1() {...};
export const function2() {...};
在很多现代浏览器[6]可以使用 它兼具两方面的优点:具有 CJS
的简单语法和AMD
的异步得益于 ES6
的静态模块结构[7],可以进行 Tree Shaking[8]ESM
允许像Rollup
这样的打包器,删除不必要的代码[9],减少代码包可以获得更快的加载可以在 HTML
中调用,只要如下
<script type="module">
import {func1} from 'my-lib';
func1();
</script>
但是不是所有的浏览器都支持(来源[10])
总结
由于 ESM
具有简单的语法,异步特性和可摇树性,因此它是最好的模块化方案UMD
随处可见,通常在ESM
不起作用的情况下用作备用CJS
是同步的,适合后端AMD
是异步的,适合前端
感谢你的阅读,开发者们!在未来,我计划深入讨论每个模块,特别是 ESM,因为它包含了许多很棒的东西。请继续关注!
如果你注意到任何错误,请告诉我。
参考
basic js modules[11] CJS in nodejs[12] CJs-ESM comparison[13] On inventing JS module formats and script loaders[14] Why use AMD[15] es6 modules browser compatibility[16] Reduce JS payloads with tree-shaking[17] JS modules - static structure[18] ESM in browsers[19] ES Modules deep dive - cartoon[20] Reasons to use ESM[21]
参考资料
What are CJS, AMD, UMD, and ESM in Javascript?: https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm
[2]Igor Irianto: https://dev.to/iggredible
[3]CJS
模块: https://blog.risingstack.com/node-js-at-scale-module-system-commonjs-require/
来源: http://bob.yexley.net/umd-javascript-that-runs-anywhere/
[5]这里: https://github.com/umdjs/umd/
[6]现代浏览器: https://caniuse.com/es6-module
[7]静态模块结构: https://exploringjs.com/es6/ch_modules.html#sec_design-goals-es6-modules
[8]Tree Shaking: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/
[9]删除不必要的代码: https://dev.to/bennypowers/you-should-be-using-esm-kn3
[10]来源: https://jakearchibald.com/2017/es-modules-in-browsers/
[11]basic js modules: https://www.freecodecamp.org/news/anatomy-of-js-module-systems-and-building-libraries-fadcd8dbd0e/
[12]CJS in nodejs: https://blog.risingstack.com/node-js-at-scale-module-system-commonjs-require/
[13]CJs-ESM comparison: https://jsmodules.io/cjs.html
[14]On inventing JS module formats and script loaders: http://tagneto.blogspot.com/2011/04/on-inventing-js-module-formats-and.html
[15]Why use AMD: https://requirejs.org/docs/whyamd.html
[16]es6 modules browser compatibility: https://caniuse.com/#feat=es6-module
[17]Reduce JS payloads with tree-shaking: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/
[18]JS modules - static structure: https://exploringjs.com/es6/ch_modules.html#static-module-structure
[19]ESM in browsers: https://jakearchibald.com/2017/es-modules-in-browsers/
[20]ES Modules deep dive - cartoon: https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
[21]Reasons to use ESM: https://dev.to/bennypowers/you-should-be-using-esm-kn3