一開始，Javascript 沒有辦法導入/導出模塊。這是個問題。想象一下，在一個文件中編寫您的應用程序 - 這將是一場噩夢!

然后，比我聰明得多的人試圖為 Javascript 添加模塊化。其中一些是CJS、AMD、UMD 和 ESM。您可能聽說過其中一些(還有其他方法，但這些是大玩家)。

我將介紹高級信息：語法、目的和基本行為。我的目標是幫助讀者在看到它們時認出。

CJS

CJS 是 CommonJS 的縮寫。這是它的樣子：

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

• 你們中的一些人可能會立即從 node.js 中識別出 CJS 語法。那是因為 node使用 CJS 模塊格式。
• CJS 同步導入模塊。
• 可以從庫node_modules或本地目錄導入。無論是通過const myLocalModule = require('./some/local/file.js')還是 var React = require('react'); 都可以。
• 當 CJS 導入時，它會給你一個導入對象的副本。
• 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 異步導入模塊(因此得名)。
• AMD 是為前端設(shè)計的(當它被提出時)(而 CJS 后端)。
• AMD 語法不如 CJS 直觀。我認為 AMD 是 CJS 的完全相反的兄弟。

UMD

UMD 代表通用模塊定義。這是它的樣子(來源)：

(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; 
})); 

• 適用于前端和后端(因此得名Universal)。
• 與 CJS 或 AMD 不同，UMD 更像是一種配置多個模塊系統(tǒng)的模式。
• UMD 通常在使用 Rollup/Webpack 等打包器時用作回退模塊

ESM

ESM 代表 ES 模塊。實現(xiàn)標準模塊系統(tǒng)是 Javascript 的建議。相信很多人都看過這個：

import React from 'react'; 

其他情況

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

• 適用于許多現(xiàn)代瀏覽器
• 它兼具兩全其美：類似 CJS 的簡單語法和 AMD 的異步
• Tree-shakeable，由于 ES6 的靜態(tài)模塊結(jié)構(gòu)
• ESM 允許像 Rollup 這樣的打包器刪除不必要的代碼，允許站點發(fā)送更少的代碼以獲得更快的加載。

可以在 HTML 中調(diào)用，只需執(zhí)行以下操作：

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

這可能無法在所有瀏覽器中 100% 工作。

概括

• ESM 是最好的模塊格管理式，這要歸功于其簡單的語法、異步性質(zhì)和 tree-shakeability。
• UMD 隨處可用，通常用作 ESM 不起作用時的后備方案
• CJS 是同步的，有利于后端。
• AMD 是異步的，適合前端。

感謝閱讀。

本文由聞數(shù)起舞翻譯自Igor Irianto的文章《What Are CJS, AMD, UMD, and ESM in Javascript?》，轉(zhuǎn)載請注明出處，原文鏈接：

https://irian.to/blogs/what-are-cjs-amd-umd-and-esm-in-javascript/

【責任編輯：趙寧寧 TEL：（010）68476606】