JavaScript的CJS、AMD、UMD、ESM都是啥

原文在這裏。

在最開始JavaScript沒有import / export模塊這些機制。全部的代碼都在一個文件裏，這簡直就是災難。

以後就出現了一些機制改變只有一個文件的問題。因而就出現了CJS、AMD、UMD和ESM。這篇小文就是讓你們瞭解這些都是什麼。

CJS

CJS全稱CommonJS。看起來是這樣的：

//importing 
const doSomething = require('./doSomething.js'); 

//exporting
module.exports = function doSomething(n) {
  // do something
}
複製代碼

CJS常常在node開發中出現。

• CJS使用同步方式引入模塊
• 你能夠從node_modules或者本地目錄引入模塊。如：const someModule = require('./some/local/file');。
• 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異步引入模塊，也是所以得名
• 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更像是配置多模塊系統的模式
• UMD一般是Rollup、webpack的候補選擇

ESM

ESM的全稱是ES Modules。如：

import React from 'react';
複製代碼

或者

import {foo, bar} from './myLib';

...

export default function() {
  // your Function
};
export const function1() {...};
export const function2() {...};
複製代碼

• 在不少現代的瀏覽器裏均可以用
• 先後端均可以用。CJS同樣的簡單的語法規則和AMD異步搖樹
• ESM容許打包工具，好比Rollup、webpack去除沒必要要的代碼
• 在HTML調用

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

  func1();
</script>
複製代碼

暫時尚未獲得所有瀏覽器的支持。

總結

• ESM得益於簡單的語法、異步和搖樹的特色，基本上就是最好的模塊機制了
• UMD哪裏均可以用，因此被用做備用打包方案
• CJS是同步的，在後端中用的比較多
• AMD是異步的，對前端友好

感謝閱讀！