什么是CJS,AMD,UMD和ESM?
JS中才加入了模块的概念。其中就有CJS,AMD,UMD,ESM这些模块的出现。
- CJS
cjs是common js的缩写，主要用于服务器端，它的代码语法长这个样子：
// importing
const doSomething = require('./doSomething.js')
// exporting
module.exports = function doSomething(n) {
// do something
}
你们或许对CJS的语法很熟悉，因为node用的就是CJS的模块方式。
CJS是同步引入模块的
可以从库中引入或者从本地某个文件夹中引入
const myLocalModule = require('./some/local/file.js');
const React = require('react');
用CJS引入的是要引入对象的一个拷贝
CJS在浏览器环境中是无效的，它必须要经过编译和打包后才能在浏览器环境中执行。
CommonJS，只能在 NodeJS 上运行，使用 require(“module”) 读取并加载模块。
缺点：不支持浏览器，执行后才能拿到依赖信息，由于用户可以动态 require（例如 react 根据开发和生产环境导出不同代码 的写法），无法做到提前分析依赖以及 Tree-Shaking 。
- AMD
AMD是asynchronous module definition 的缩写
define(['dep1', 'dep2'], function (dep1, dep2) {
// define the module value by returning a value.
return funtion () {};
})
// or simplified CommonJS wrapping
define(function (require) {
var dep1 = require('dep1'),
dep2 = require('dep2');
return function () {};
})
AMD是异步加载模块的。(就像它的名字一样)
AMD设计出来是供前端使用的，而CJS刚开始设计的目的是供后端使用的。
AMD的语法没有CJS那样直观。
Asynchronous Module Definition，可以看作 CJS 的异步版本，制定了一套规则使模块可以被异步 require 进来并在回调函数里继续使用，然后 require.js 等前端库也可以利用这个规则加载代码了。
- UMD
UMD是Universal Module Definition的缩写。它的语法是：
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery', 'underscore'], factory);
} else if (typeof exports === 'objects') {
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更像是一种模式，去适配多种模块系统。
当用像rollup/webpack这样的打包器的时候，UMD通常用作一个回调模块。
Universal Module Definition，同时兼容 CJS 和 AMD，并且支持直接在前端用** **的方式加载。现在还在广泛使用，不过可以想象 ESM 和 IIFE 逐渐代替它。
- IIFE
Immediately Invoked Function Expression，只是一种写法，可以隐藏一些局部变量，前端人要是不懂这个可能学的是假前端。可以用来代替 UMD 作为纯粹给前端使用的写法。 - ESM
ESM是ES 模块的缩写。是JS语言为了标准化模块系统的一种方案。它的语法形式：
import React from 'react';
export default function() {
// your function
}
export const function1() {}
export const function2() {}
多种主流浏览器兼容。
具有类似CJS那样的简单的语法以及AMD的异步加载的功能。
具有Tree-shakeable的特性，这是由于ES6的静态模块结构。
rollup这样的打包器在打包ESM的时候，会除去冗余的代码，这样网站就可以加载更少的代码已加快加载速度。
可以在html代码中使用。
总结：
ESM由于具有简单的语法，异步加载的特性，以及Tree-shakeable的特性，因此被广泛使用。
UMD可以在任何环境下使用，并且在ESM不能使用的情况下回选择UMD。
CJS是同步的，适用于后端环境。
AMD是异步的，适用于前端环境。