一開(kāi)始，Javascript 沒(méi)有辦法導(dǎo)入/導(dǎo)出模塊。這是個(gè)問(wèn)題。想象一下，在一個(gè)文件中編寫您的應(yīng)用程序 - 這將是一場(chǎng)噩夢(mèng)!

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

我將介紹高級(jí)信息：語(yǔ)法、目的和基本行為。我的目標(biāo)是幫助讀者在看到它們時(shí)認(rèn)出。

CJS

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

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

• 你們中的一些人可能會(huì)立即從 node.js 中識(shí)別出 CJS 語(yǔ)法。那是因?yàn)?node使用 CJS 模塊格式。
• CJS 同步導(dǎo)入模塊。
• 可以從庫(kù)node_modules或本地目錄導(dǎo)入。無(wú)論是通過(guò)const myLocalModule = require('./some/local/file.js')還是 var React = require('react'); 都可以。
• 當(dāng) CJS 導(dǎo)入時(shí)，它會(huì)給你一個(gè)導(dǎo)入對(duì)象的副本。
• CJS 在瀏覽器中不起作用。它必須被轉(zhuǎn)譯和打包。

AMD

AMD 代表異步模塊定義。這是一個(gè)示例代碼：

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 異步導(dǎo)入模塊(因此得名)。
• AMD 是為前端設(shè)計(jì)的(當(dāng)它被提出時(shí))(而 CJS 后端)。
• AMD 語(yǔ)法不如 CJS 直觀。我認(rèn)為 AMD 是 CJS 的完全相反的兄弟。

UMD

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

(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 更像是一種配置多個(gè)模塊系統(tǒng)的模式。
• UMD 通常在使用 Rollup/Webpack 等打包器時(shí)用作回退模塊

ESM

ESM 代表 ES 模塊。實(shí)現(xiàn)標(biāo)準(zhǔn)模塊系統(tǒng)是 Javascript 的建議。相信很多人都看過(guò)這個(gè)：

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ǔ)法和 AMD 的異步
• Tree-shakeable，由于 ES6 的靜態(tài)模塊結(jié)構(gòu)
• ESM 允許像 Rollup 這樣的打包器刪除不必要的代碼，允許站點(diǎn)發(fā)送更少的代碼以獲得更快的加載。

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

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

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

概括

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

感謝閱讀。

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

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

【責(zé)任編輯：趙寧寧 TEL：（010）68476606】