CJS, AMD, UMD,ESM 简洁解释

前言：

CJS、AMD、UMD 和 ESM都是给 Javascript 添加模块化的方法，还有其他方法，但这些是比较通用的。什么？你不知道什么叫模块化？那你肯定写过import * from ''吧，这就已经使用了模块化的技术思想。

ESM (ES 模块, 前端常用*)

• ESM 代表 ES 模块。这是 Javascript 提出的实现一个标准模块系统的方案。我相信你们很多人都看到过这个:

import React from 'react';
复制代码
或者其他更多的

import {
    
    foo, bar} from './myLib';
...

export default function() {
    
    
  // your Function
};
export const function1() {
    
    ...};
export const function2() {
    
    ...};

• 它兼具两方面的优点：具有 CJS 的简单语法和 AMD 的异步
• 得益于 ES6 的静态模块结构，可以进行 Tree Shaking
• ESM 允许像 Rollup 这样的打包器，删除不必要的代码，减少代码包可以获得更快的加载

CJS (CommonJS:同步导入模块)

CJS 是 CommonJS 的缩写。经常我们这么使用：

// importing 
const doSomething = require('./doSomething.js'); 
// exporting
module.exports = function doSomething(n) {
    
    
  // do something
}

• Node 就是使用 CJS 模块的
• CJS 是同步导入模块
• 你可以从 node_modules 中引入一个库或者从本地目录引入一个文件 。如 const myLocalModule = require(’./some/local/file.js’) 或者 var React = require(‘react’); ，都可以起作用,当 CJS 导入时，它会给你一个导入对象的副本.
• CJS 不能在浏览器中工作。它必须经过转换和打包

AMD (asynchronously：异步模块定义)

示例

define(['dep1', 'dep2'], function (dep1, dep2) {
    
    
    //Define the module value by returning a value.
    return function () {
    
    };
});

// "simplified CommonJS wrapping" https://requirejs.org/docs/whyamd.html
define(function (require) {
    
    
    var dep1 = require('dep1'),
        dep2 = require('dep2');
    return function () {
    
    };
});

• AMD 是异步(asynchronously)导入模块的(因此得名)
• 一开始被提议的时候，AMD 是为前端而做的(而 CJS 是后端)
• AMD 的语法不如 CJS 直观。我认为 AMD 和 CJS 完全相反

UMD（Universal Module Definition：通用模块定义）

(function (root, factory) {
    
    
    if (typeof define === "function" && define.amd) {
    
    
        define(["jquery", "underscore"], factory);
    } else if (typeof exports === "object") {
    
    
        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;
}));

• 在前端和后端都适用（“通用”因此得名）
• 与 CJS 或 AMD 不同，UMD 更像是一种配置多个模块系统的模式。这里可以找到更多的模式
• 当使用 Rollup/Webpack 之类的打包器时，UMD 通常用作备用模块