乐趣区

关于前端: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 是异步的,对前端敌对

感激浏览!

退出移动版