关于前端:JavaScript的CJSAMDUMDESM都是啥

在最开始 JavaScript 没有 import / export 模块这些机制。所有的代码都在一个文件里，这几乎就是劫难。

之后就呈现了一些机制扭转只有一个文件的问题。于是就呈现了CJS、AMD、UMD 和 ESM。这篇小文就是让大家理解这些都是什么。

CJS

CJS 全称CommonJS。看起来是这样的：

//importing 
const doSomething = require('./doSomething.js'); 

//exporting
module.exports = function doSomething(n) {// do something}

CJS 常常在 node 开发中呈现。

• CJS 应用同步形式引入模块
• 你能够从 node_modules 或者本地目录引入模块。如：const someModule = require('./some/local/file');。
• CJS 引入模块的一个复制文件。
• CJS 不能在浏览器里工作。要在浏览器里应用，则须要转码和打包

AMD

AMD 的全称是异步模块定义。如：

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 异步引入模块，也是因而得名
• ADM 是给前端用的
• AMD 不如 CJS 直观

UMD

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 更像是配置多模块零碎的模式
• UMD 通常是 Rollup、webpack 的候补抉择

ESM

ESM 的全称是 ES Modules。如：

import React from 'react';

或者

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

...

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

• 在很多古代的浏览器里都能够用
• 前后端都能够用。CJS 一样的简略的语法规定和 AMD 异步 摇树
• ESM 容许打包工具，比方 Rollup、webpack 去除不必要的代码

• 在 HTML 调用

  <script type="module">
  import {func1} from 'my-lib';
  
  func1();
  </script>

临时还没有失去全副浏览器的反对。

总结

• ESM 得益于简略的语法、异步和摇树的特点，基本上就是最好的模块机制了
• UMD 哪里都能够用，所以被用作备用打包计划
• CJS 是同步的，在后端中用的比拟多
• AMD 是异步的，对前端敌对

感激浏览！