最开始的时候,JavaScript是没有import/export模块等机制的。所有代码都在一个文件中,这是一场灾难。之后,一些机制的改变只有一个文件的问题。然后出现了CJS、AMD、UMD和ESM。这篇简短的文章就是让大家知道这些是什么。CJSCJS的全称是CommonJS。看起来像这样://importingconstdoSomething=require('./doSomething.js');//exportingmodule.exports=functiondoSomething(n){//dosomething}CJS经常出现在node开发中。CJS同步导入模块。您可以从node_modules或本地目录导入模块。如:constsomeModule=require('./some/local/file');。CJS导入模块的副本。CJS在浏览器中不起作用。在浏览器中使用,需要转码打包AMDAMD代表异步模块定义。如:define(['dep1','dep2'],function(dep1,dep2){//Definethemodulevaluebyreturningavalue.returnfunction(){};});或//“simplifiedCommonJSwrapping”https://requirejs.org/docs/whyamd.htmldefine(function(require){vardep1=require('dep1'),dep2=require('dep2');returnfunction(){};});AMD异步引入模块,因此名称ADM用于前端使用AMD不像CJS那样直观。UMDUMD的全称是UniversalModuleDefinition。如:(function(root,factory){if(typeofdefine==="function"&&define.amd){define(["jquery","underscore"],factory);}elseif(typeofexports==="object"){module.exports=factory(require("jquery"),require("underscore"));}else{root.Requester=factory(root.$,root._);}}(this,function($,_){//thisiswhereIdefinedmymoduleimplementationvarRequester={//...};returnRequester;}));它可以在前端和后端使用。与CJS和AMD不同,UMD更像是一种配置多模块系统的模式。UMD通常是Rollup和webpack的替代选项ESMESM的全称是ESModules。如:importReactfrom'react';或import{foo,bar}from'./myLib';...exportdefaultfunction(){//yourFunction};exportconstfunction1(){...};exportconstfunction2(){...};适用于许多具有前端和后端的现代浏览器。与CJS和AMD异步tree-shakingESM一样简单的语法规则允许打包工具,如Rollup、webpack去除不必要的代码,调用尚未被所有浏览器支持。总结ESM受益于简单的语法、异步和tree-shaking特性。它基本上是最好的模块机制。UMD可以随处使用,因此被用作备份打包方案。CJS是同步的。它在后端用于比较。Multi-AMD异步,对前端友好
