JS各种模块引用

各种引用方式

CJS,AMD,UMD,ESM

CJS

CommonJs

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

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

• 常用于node中
• 引入模块是同步的
• 使用CJS引入会得到被引入对象的拷贝
• 不能用于浏览器

---

AMD

Asynchronous Module Definition

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 () {};
});

• 异步引入模块
• 为了前端使用而提出的
• 不如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通常被用作打包工具的回调模块

---

ESM

ES Modules,Javascipt 提出的标准的模块系统

import React from 'react';

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

...

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

• 运行在现代浏览器中
• 同事具备CJS的简单语法和AMD的异步引入
• 支持Trer-shakealbe,基于ES6的static module structure特性
• 支持打包工具移除不必要的代码，使网站加载更少的代码来减少加载速度
• 可以在HTML中使用
• 但并不是所有浏览器都支持(具体)

---

总结

• ESM是最好用的，它语法简单，异步加载并且支持tree-shake
• UMD可以运行在任何环境，并且如果ESM不支持的话可以用于回调
• CJS同步加载对后端友好
• AMD异步加载对前端友好

---

参考