最初，Javascript没有办法导入/导出模块。这是个问题。想象一下将您的应用程序写在一个文件中——那将是一场噩梦！然后有人比我聪明得多，试图为Javascript添加模块化。其中一些是CJS、AMD、UMD和ESM。您可能听说过其中一些（还有其他一些，但这些都是大玩家）。我将介绍高级信息：语法、目的和基本行为。我的目标是帮助读者在看到它们时认出它们。CJSCJS是CommonJS的缩写。它看起来像这样：//importingconstdoSomething=require('./doSomething.js');//exportingmodule.exports=functiondoSomething(n){//dosomething}你们中的一些人可能会立即从node.jsCJS语法中认出。那是因为节点使用CJS模块格式。CJS同步导入模块。可以从库node_modules或从本地目录导入。通过constmyLocalModule=require('./some/local/file.js')或varReact=require('react');将工作。当CJS导入时，它会为您提供导入对象的副本。CJS在浏览器中不起作用。它必须被转译和打包。AMDAMD代表异步模块定义。这是一个示例代码：define(['dep1','dep2'],function(dep1,dep2){//Definethemodulevaluebyreturningavalue.returnfunction(){};});或//“简化的CommonJSwrapping”https://requirejs。org/docs/whyamd.htmldefine(function(require){vardep1=require('dep1'),dep2=require('dep2');returnfunction(){};});AMD异步导入模块（因此得名）。AMD是为前端（和CJS后端）设计的（当它被提出时）。AMD语法不如CJS直观。我认为AMD是CJS的对立兄弟。UMDUMD代表通用模块定义。下面是它的样子（来源）：==="object"){module.exports=factory(require("jquery"),require("underscore"));}else{root.Requester=factory(root.$,root._);}}(this,function($,_){//thisiswhereIdefinedmymoduleimplementationvarRequester={//...};returnRequester;}));适用于前端和后端（因此名称为Universal）。与CJS或AMD不同，UMD更像是一种配置多模块系统的模式。UMD通常在使用Rollup/WebpackESMESM代表ES模块等打包器时用作后备模块。实现标准模块系统是一个Javascript提议。这个相信很多人都看过：importReactfrom'react';其他情况import{foo,bar}from'./myLib';...exportdefaultfunction(){//yourFunction};exportconstfunction1(){...};exportconstfunction2(){...};适用于许多现代浏览器它兼具两全其美：简单的类CJS语法和AMD的异步Tree-shakeable，这要归功于ES6的静态模块结构ESM允许像Rollup这样的打包器删除不必要的代码，允许站点发送更少的代码以加快加载速度.可以在HTML中调用，只需执行：这可能无法在所有浏览器中100%工作。总结ESM是模块化网格管理的最佳格式，这要归功于其简单的语法、异步特性和tree-shakeability。UMD随处可用，通常用作ESM不起作用时的后备CJS是同步的并且有利于后端。AMD是异步的，适合做前端。谢谢阅读。本文由文述启武翻译自IgorIrianto的文章《What Are CJS, AMD, UMD, and ESM in Javascript?》，转载请注明出处，原文链接：https://irian.to/blogs/what-are-cjs-amd-umd-and-esm-in-javascript/[责任编辑：赵宁宁电话：(010)68476606]
