js模組 - amd cmd commonjs esm umd

寫過前端程式碼大概率聽說過amd cmd umd commonjs esm這些名詞, 想當初我第一次看到這些的時候, 人都麻了, 都是些啥啊. 後來我知道了, 這些都是js的模組規範.

amd - 瀏覽器中的js模組化解決方案

AMD全稱是Async Module Definition非同步模組定義

RequireJs是AMD模組規範的一個具體實現.

AMD中定義一個計算器模組calculator, 這個模組依賴另一個名為math的模組

calculator.js

define('calculator', ['math'], function(math) {
    return {
        add: function(left, right) { return math.add(left, right) },
        subtract: function(left, right) { return math.subtract(left, right) }
    }
})

使用剛才定義的calculator模組

main.js

require('calculator', function(calculator) {
    console.log('1 + 1 = ' + calculator.add(1, 1));
    console.log('2 - 2 = ' + calculator.subtract(2, 1));
})

cmd - 類似amd的用於瀏覽器中的js模組規範

CMD全稱是Common Module Definition即通用模組定義,. 像AMD與RequireJs關係一樣, 與CMD規範繫結的是sea.js

在定義模組方面, CMD和AMD一樣通過define函式來定義模組; 兩者的主要區別在於對依賴的載入上, CMD中不需要在define的引數中直接宣告需要用到的模組

還是以宣告calculator模組為例

calculator.js

define('calculator', function(require, exports) {
    var math = require('math');
    exports.add = function(left, right) { return math.add(left, right) };
    exports.subtract = function(left, right) { return math.subtract(left, right) };
})

可以看到calculator模組所的依賴的math模組沒有在define函式的引數中進行宣告, 而是通過require('math')來引入的

使用calculator模組

seajs.use(['calculator'], function(calculator) {
    console.log('1 + 1 = ' + calculator.add(1, 1));
    console.log('2 - 2 = ' + calculator.subtract(2, 1));
})

commonjs - Node中使用的模組規範

定義math模組

math.js

module.exports = {
    add: function(left, right) {
        return left + right;
    },
    subtract: function(left, right) {
        return left - right;
    }
}

使用剛才定義的math模組, 並再定義一個calculator模組

calculator.js

const math = require('./math.js');
module.exports = {
    add: math.add
}

umd - 一種同時相容amd cmd commonjs規範的規範

amd cmd通常只能在瀏覽器中使用, commonjs只能在服務端(Node)環境下使用, 這樣子搞會導致我們基於其中某一種模組規範寫的js模組無法在服務端和瀏覽器端進行復用. umd解決了這個問題, 它相容幷包, 使得使用此規範寫的js模組既可以在瀏覽器環境下使用, 也可以在Node(服務端)環境中用

(function (root, factory) {
    if (typeof exports === 'object' && typeof module === 'object')
        // commonjs
        module.exports = factory()
    else if (typeof define === 'function' && define.amd)
        // amd
        define([], factory)
    else if (typeof exports === 'object')
        // commonjs
        exports['math'] = factory()
    else
        // 全域性物件, 瀏覽器中是 window
        root['math'] = factory()
})(this, function() {
    return { add: function(left, right) { return left + right; } }
})

esm - ES6模組規範

使用import匯入模組, 通過export匯出模組

math.js

export { add: (left, right) => left + right; }

點選此處檢視程式碼

import { add } from './math.js';

console.log('1 + 1 = ' + add(1, 1));

小結

amd, cmd已經成為了過去式(個人感覺), 現在常用的模組規範一般就是es6模組和commonjs(只用於node)了, node中也已經提供了實驗性的es模組支援.

瀏覽器對es的import和export的支援也已經很不錯了(除了IE其他主流瀏覽器都支援了)

好訊息微軟將在2022-6-15停止對IE11在win10非長期支援版上的支援