[JavaScript知识库]CJSAMDUMD和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在浏览器环境中是无效的，它必须要经过编译和打包后才能在浏览器环境中执行。

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那样直观。

• 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通常用作一个回调模块。

• 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是异步的，适用于前端环境。