关于前端:JavaScript的CJSAMDUMDESM都是啥

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

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

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 的全称是异步模块定义。如：

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 全称是 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 的全称是 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 是异步的，对前端敌对

感激浏览！

CJS

AMD

UMD

ESM

总结