最初，Javascript 无法导入/导出模块。这是个问题。想象一下将您的应用程序编写在单个文件中- 这将是一场噩梦！然后，比我聪明得多的人尝试为Javascript 添加模块化。其中一些是CJS、AMD、UMD 和ESM。您可能听说过其中的一些（还有其他方法，但这些都是大玩家）。我将介绍高级信息：语法、目的和基本行为。我的目标是帮助读者在看到它们时认出它们。

CJSCJS 是CommonJS 的缩写。它看起来是这样的：

//导入const doSomething=require('./doSomething.js'); //exportingmodule.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 不适用于浏览器。必须对其进行翻译和打包。 AMDAMD 代表异步模块定义。这是示例代码：

Define(['dep1', 'dep2'], function (dep1, dep2) { //通过返回值来定义模块值return function () {};});or

//'简化的CommonJS 包装' https://requirejs.org/docs/whyamd.htmldefine(function (require) { var dep1=require('dep1'), dep2=require('dep2'); return function () {};}) ;AMD 异步导入模块（因此得名）。 AMD 是为前端设计的（当它被提出时）（而CJS 是后端）。 AMD 语法不如CJS 直观。我认为AMD是CJS完全相反的兄弟。 UMDUMD 代表通用模块定义。这就是它的样子（来源）：

(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 ($, _) { //这是我定义模块实现的地方var Requester={ //. }; return Requester;}));适用于前端和后端（因此称为通用）。与CJS 或AMD 不同，UMD 更多的是一种配置多个模块系统的模式。使用Rollup/Webpack 等捆绑器时，UMD 通常用作后备模块。 ESMESM 代表ES 模块。实现标准模块系统是Javascript 的建议。相信很多人都看过：

import React from 'react';其他情况

import {foo, bar} from './myLib';export default function() { //你的函数};export const function1() {.};export const function2() {.};适用于许多现代浏览器它提供了两全其美的优点：类似CJS 的简单语法和AMD 的异步Tree-shakeable，这要归功于ES6 的静态模块结构ESM 允许像Rollup 这样的打包程序删除不必要的代码，允许网站发送更少的代码以加快加载速度。可以在HTML 中调用，只需执行以下操作： 这可能无法在所有浏览器中100% 工作。

总结ESM 是最好的模块模式管理风格，这要归功于它简单的语法、异步特性和树可抖动性。 UMD 随处可用，并且通常在ESM 不起作用时用作后备方案。 CJS 是同步的，有利于后端。 AMD是异步的，适合前端。谢谢阅读。 （本文由温书其武翻译自Igor Irianto的文章《What Are CJS, AMD, UMD, and ESM in Javascript》，转载请注明出处。原文链接：https://irian.to/blogs/what-are-cjs-amd-umd-and-esm-in-javascript/）