[[409368]]

 在最開(kāi)始JavaScript沒(méi)有import / export模塊這些機(jī)制。所有的代碼都在一個(gè)文件里，這簡(jiǎn)直就是災(zāi)難。

之后就出現(xiàn)了一些機(jī)制改變只有一個(gè)文件的問(wèn)題。于是就出現(xiàn)了CJS、AMD、UMD和ESM。這篇小文就是讓大家了解這些都是什么。

CJS

CJS全稱CommonJS?？雌饋?lái)是這樣的： 

//importing   
const doSomething = require('./doSomething.js');   
//exporting  
module.exports = function doSomething(n) {  
  // do something  
} 

CJS經(jīng)常在node開(kāi)發(fā)中出現(xiàn)。

•  CJS使用同步方式引入模塊
•  你可以從node_modules或者本地目錄引入模塊。如：const someModule = require('./some/local/file');。
•  CJS引入模塊的一個(gè)復(fù)制文件。
•  CJS不能在瀏覽器里工作。要在瀏覽器里使用，則需要轉(zhuǎn)碼和打包

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異步引入模塊，也是因此得名
•  ADM是給前端用的
•  AMD不如CJS直觀

UMD

UMD全稱是Universal Module Definition。如： 

(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更像是配置多模塊系統(tǒng)的模式
•  UMD通常是Rollup、webpack的候補(bǔ)選擇

ESM

ESM的全稱是ES Modules。如：

import React from 'react'; 

或者 

import {foo, bar} from './myLib';  
...  
export default function() {  
  // your Function  
};  
export const function1() {...};  
export const function2() {...}; 

•  在很多現(xiàn)代的瀏覽器里都可以用
•  前后端都可以用。CJS一樣的簡(jiǎn)單的語(yǔ)法規(guī)則和AMD異步搖樹(shù)
•  ESM允許打包工具，比如Rollup、webpack去除不必要的代碼
•  在HTML調(diào)用 

<script type="module">  
import {func1} from 'my-lib';  
func1();  
</script> 

暫時(shí)還沒(méi)有得到全部瀏覽器的支持。

總結(jié)

•  ESM得益于簡(jiǎn)單的語(yǔ)法、異步和搖樹(shù)的特點(diǎn)，基本上就是最好的模塊機(jī)制了
•  UMD哪里都可以用，所以被用作備用打包方案
•  CJS是同步的，在后端中用的比較多
•  AMD是異步的，對(duì)前端友好