什么是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，并且支持直接在前端用** <script src=''lib.umd.js /> **的方式加载。现在还在广泛使用，不过可以想象 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是异步的，适用于前端环境。