最初，Javascript 無(wú)法導(dǎo)入/導(dǎo)出模塊。這是個(gè)問(wèn)題。想象一下將您的應(yīng)用程序編寫在單個(gè)文件中- 這將是一場(chǎng)噩夢(mèng)！然后，比我聰明得多的人嘗試為Javascript 添加模塊化。其中一些是CJS、AMD、UMD 和ESM。您可能聽(tīng)說(shuō)過(guò)其中的一些（還有其他方法，但這些都是大玩家）。我將介紹高級(jí)信息：語(yǔ)法、目的和基本行為。我的目標(biāo)是幫助讀者在看到它們時(shí)認(rèn)出它們。

CJSCJS 是CommonJS 的縮寫。它看起來(lái)是這樣的：

//導(dǎo)入const doSomething=require('./doSomething.js'); //exportingmodule.exports=function doSomething(n) { //do Something} 你們中的一些人可能會(huì)立即從node.js 語(yǔ)法中認(rèn)出CJS。這是因?yàn)镹ode 使用CJS 模塊格式。 CJS同步導(dǎo)入模塊?？梢詮膸?kù)node_modules或本地目錄導(dǎo)入。通過(guò)const myLocalModule=require('./some/local/file.js') 或var React=require('react');當(dāng)CJS 導(dǎo)入時(shí)，它會(huì)為您提供導(dǎo)入對(duì)象的副本。 CJS 不適用于瀏覽器。必須對(duì)其進(jìn)行翻譯和打包。 AMDAMD 代表異步模塊定義。這是示例代碼：

Define(['dep1', 'dep2'], function (dep1, dep2) { //通過(guò)返回值來(lái)定義模塊值return function () {};});or

//'簡(jiǎn)化的CommonJS 包裝' https://requirejs.org/docs/whyamd.htmldefine(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完全相反的兄弟。 UMDUMD 代表通用模塊定義。這就是它的樣子（來(lái)源）：

(function(root,factory) { if(typeofdefine==='function'define.amd){define(['jquery','underscore'],factory); }elseif(typeofexports==='object' ) { module.exports=工廠(require('jquery'), require('下劃線')); } else { root.Requester=工廠(root.$, root._); }}(this, function ($, _) { //這是我定義模塊實(shí)現(xiàn)的地方var Requester={ //. }; return Requester;}));適用于前端和后端（因此稱為通用）。與CJS 或AMD 不同，UMD 更多的是一種配置多個(gè)模塊系統(tǒng)的模式。使用Rollup/Webpack 等捆綁器時(shí)，UMD 通常用作后備模塊。 ESMESM 代表ES 模塊。實(shí)現(xiàn)標(biāo)準(zhǔn)模塊系統(tǒng)是Javascript 的建議。相信很多人都看過(guò)：

import React from 'react';其他情況

import {foo, bar} from './myLib';export default function() { //你的函數(shù)};export const function1() {.};export const function2() {.};適用于許多現(xiàn)代瀏覽器它提供了兩全其美的優(yōu)點(diǎn)：類似CJS 的簡(jiǎn)單語(yǔ)法和AMD 的異步Tree-shakeable，這要?dú)w功于ES6 的靜態(tài)模塊結(jié)構(gòu)ESM 允許像Rollup 這樣的打包程序刪除不必要的代碼，允許網(wǎng)站發(fā)送更少的代碼以加快加載速度。可以在HTML 中調(diào)用，只需執(zhí)行以下操作： 這可能無(wú)法在所有瀏覽器中100% 工作。

總結(jié)ESM 是最好的模塊模式管理風(fēng)格，這要?dú)w功于它簡(jiǎn)單的語(yǔ)法、異步特性和樹可抖動(dòng)性。 UMD 隨處可用，并且通常在ESM 不起作用時(shí)用作后備方案。 CJS 是同步的，有利于后端。 AMD是異步的，適合前端。謝謝閱讀。 （本文由溫書其武翻譯自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/）