ES6系列之模組載入方案

冴羽發表於2018-11-20

前言

本篇我們重點介紹以下四種模組載入規範:

  1. AMD
  2. CMD
  3. CommonJS
  4. ES6 模組

最後再延伸講下 Babel 的編譯和 webpack 的打包原理。

require.js

在瞭解 AMD 規範之前,我們先來看看 require.js 的使用方式。

專案目錄為:

* project/
    * index.html
    * vender/
        * main.js
        * require.js
        * add.js
        * square.js
        * multiply.js

index.html 的內容如下:

<!DOCTYPE html>
<html>
    <head>
        <title>require.js</title>
    </head>
    <body>
        <h1>Content</h1>
        <script data-main="vender/main" src="vender/require.js"></script>
    </body>
</html>

data-main="vender/main" 表示主模組是 vender 下的 main.js

main.js 的配置如下:

// main.js
require([`./add`, `./square`], function(addModule, squareModule) {
    console.log(addModule.add(1, 1))
    console.log(squareModule.square(3))
});

require 的第一個參數列示依賴的模組的路徑,第二個參數列示此模組的內容。

由此可以看出,主模組依賴 add 模組square 模組

我們看下 add 模組add.js 的內容:

// add.js
define(function() {
    console.log(`載入了 add 模組`);
    var add = function(x, y) { 
        return x + y;
    };

    return {      
        add: add
    };
});

requirejs 為全域性新增了 define 函式,你只要按照這種約定的方式書寫這個模組即可。

那如果依賴的模組又依賴了其他模組呢?

我們來看看主模組依賴的 square 模組square 模組的作用是求出一個數字的平方,比如輸入 3 就返回 9,該模組依賴一個乘法模組,該乘法模組即 multiply.js 的程式碼如下:

// multiply.js
define(function() {
    console.log(`載入了 multiply 模組`)
    var multiply = function(x, y) { 
        return x * y;
    };

    return {      
        multiply: multiply
    };
});

square 模組就要用到 multiply 模組,其實寫法跟 main.js 新增依賴模組一樣:

// square.js
define([`./multiply`], function(multiplyModule) {
    console.log(`載入了 square 模組`)
    return {      
        square: function(num) {
            return multiplyModule.multiply(num, num)
        }
    };
});

require.js 會自動分析依賴關係,將需要載入的模組正確載入。

requirejs 專案 Demo 地址:https://github.com/mqyqingfeng/Blog/tree/master/demos/ES6/module/requirejs

而如果我們在瀏覽器中開啟 index.html,列印的順序為:

載入了 add 模組
載入了 multiply 模組
載入了 square 模組
2
9

AMD

在上節,我們說了這樣一句話:

requirejs 為全域性新增了 define 函式,你只要按照這種約定的方式書寫這個模組即可。

那這個約定的書寫方式是指什麼呢?

指的便是 The Asynchronous Module Definition (AMD) 規範。

所以其實 AMD 是 RequireJS 在推廣過程中對模組定義的規範化產出。

你去看 AMD 規範) 的內容,其主要內容就是定義了 define 函式該如何書寫,只要你按照這個規範書寫模組和依賴,require.js 就能正確的進行解析。

sea.js

在國內,經常與 AMD 被一起提起的還有 CMD,CMD 又是什麼呢?我們從 sea.js 的使用開始說起。

檔案目錄與 requirejs 專案目錄相同:

* project/
    * index.html
    * vender/
        * main.js
        * require.js
        * add.js
        * square.js
        * multiply.js

index.html 的內容如下:

<!DOCTYPE html>
<html>
<head>
    <title>sea.js</title>
</head>
<body>
    <h1>Content</h1>
    <script src="vender/sea.js"></script>
    <script>
    // 在頁面中載入主模組
    seajs.use("./vender/main");
    </script>
</body>

</html>

main.js 的內容如下:

// main.js
define(function(require, exports, module) {
    var addModule = require(`./add`);
    console.log(addModule.add(1, 1))

    var squareModule = require(`./square`);
    console.log(squareModule.square(3))
});

add.js 的內容如下:

// add.js
define(function(require, exports, module) {
    console.log(`載入了 add 模組`)
    var add = function(x, y) { 
        return x + y;
    };
    module.exports = {      
        add: add
    };
});

square.js 的內容如下:

define(function(require, exports, module) {
    console.log(`載入了 square 模組`)
    var multiplyModule = require(`./multiply`);
    module.exports = {      
        square: function(num) {
            return multiplyModule.multiply(num, num)
        }
    };

});

multiply.js 的內容如下:

define(function(require, exports, module) {
    console.log(`載入了 multiply 模組`)
    var multiply = function(x, y) { 
        return x * y;
    };
    module.exports = {      
        multiply: multiply
    };
});

跟第一個例子是同樣的依賴結構,即 main 依賴 add 和 square,square 又依賴 multiply。

seajs 專案 Demo 地址:https://github.com/mqyqingfeng/Blog/tree/master/demos/ES6/module/seajs

而如果我們在瀏覽器中開啟 index.html,列印的順序為:

載入了 add 模組
2
載入了 square 模組
載入了 multiply 模組
9

CMD

與 AMD 一樣,CMD 其實就是 SeaJS 在推廣過程中對模組定義的規範化產出。

你去看 CMD 規範的內容,主要內容就是描述該如何定義模組,如何引入模組,如何匯出模組,只要你按照這個規範書寫程式碼,sea.js 就能正確的進行解析。

AMD 與 CMD 的區別

從 sea.js 和 require.js 的例子可以看出:

1.CMD 推崇依賴就近,AMD 推崇依賴前置。看兩個專案中的 main.js:

// require.js 例子中的 main.js
// 依賴必須一開始就寫好
require([`./add`, `./square`], function(addModule, squareModule) {
    console.log(addModule.add(1, 1))
    console.log(squareModule.square(3))
});
// sea.js 例子中的 main.js
define(function(require, exports, module) {
    var addModule = require(`./add`);
    console.log(addModule.add(1, 1))

    // 依賴可以就近書寫
    var squareModule = require(`./square`);
    console.log(squareModule.square(3))
});

2.對於依賴的模組,AMD 是提前執行,CMD 是延遲執行。看兩個專案中的列印順序:

// require.js
載入了 add 模組
載入了 multiply 模組
載入了 square 模組
2
9
// sea.js
載入了 add 模組
2
載入了 square 模組
載入了 multiply 模組
9

AMD 是將需要使用的模組先載入完再執行程式碼,而 CMD 是在 require 的時候才去載入模組檔案,載入完再接著執行。

感謝

感謝 require.js 和 sea.js 在推動 JavaScript 模組化發展方面做出的貢獻。

CommonJS

AMD 和 CMD 都是用於瀏覽器端的模組規範,而在伺服器端比如 node,採用的則是 CommonJS 規範。

匯出模組的方式:

var add = function(x, y) { 
    return x + y;
};

module.exports.add = add;

引入模組的方式:

var add = require(`./add.js`);
console.log(add.add(1, 1));

我們將之前的例子改成 CommonJS 規範:

// main.js
var add = require(`./add.js`);
console.log(add.add(1, 1))

var square = require(`./square.js`);
console.log(square.square(3));
// add.js
console.log(`載入了 add 模組`)

var add = function(x, y) { 
    return x + y;
};

module.exports.add = add;
// multiply.js
console.log(`載入了 multiply 模組`)

var multiply = function(x, y) { 
    return x * y;
};

module.exports.multiply = multiply;
// square.js
console.log(`載入了 square 模組`)

var multiply = require(`./multiply.js`);

var square = function(num) { 
    return multiply.multiply(num, num);
};

module.exports.square = square;

CommonJS 專案 Demo 地址:https://github.com/mqyqingfeng/Blog/tree/master/demos/ES6/module/commonJS

如果我們執行 node main.js,列印的順序為:

載入了 add 模組
2
載入了 square 模組
載入了 multiply 模組
9

跟 sea.js 的執行結果一致,也是在 require 的時候才去載入模組檔案,載入完再接著執行。

CommonJS 與 AMD

引用阮一峰老師的《JavaScript 標準參考教程(alpha)》:

CommonJS 規範載入模組是同步的,也就是說,只有載入完成,才能執行後面的操作。

AMD規範則是非同步載入模組,允許指定回撥函式。

由於 Node.js 主要用於伺服器程式設計,模組檔案一般都已經存在於本地硬碟,所以載入起來比較快,不用考慮非同步載入的方式,所以 CommonJS 規範比較適用。

但是,如果是瀏覽器環境,要從伺服器端載入模組,這時就必須採用非同步模式,因此瀏覽器端一般採用 AMD 規範。

ES6

ECMAScript2015 規定了新的模組載入方案。

匯出模組的方式:

var firstName = `Michael`;
var lastName = `Jackson`;
var year = 1958;

export {firstName, lastName, year};

引入模組的方式:

import {firstName, lastName, year} from `./profile`;

我們再將上面的例子改成 ES6 規範:

目錄結構與 requirejs 和 seajs 目錄結構一致。

<!DOCTYPE html>
<html>
    <head>
        <title>ES6</title>
    </head>
    <body>
        <h1>Content</h1>
        <script src="vender/main.js" type="module"></script>
    </body>
</html>

注意!瀏覽器載入 ES6 模組,也使用 <script> 標籤,但是要加入 type="module" 屬性。

// main.js
import {add} from `./add.js`;
console.log(add(1, 1))

import {square} from `./square.js`;
console.log(square(3));
// add.js
console.log(`載入了 add 模組`)

var add = function(x, y) {
    return x + y;
};

export {add}
// multiply.js
console.log(`載入了 multiply 模組`)

var multiply = function(x, y) { 
    return x * y;
};

export {multiply}
// square.js
console.log(`載入了 square 模組`)

import {multiply} from `./multiply.js`;

var square = function(num) { 
    return multiply(num, num);
};

export {square}

ES6-Module 專案 Demo 地址:https://github.com/mqyqingfeng/Blog/tree/master/demos/ES6/module/ES6

值得注意的,在 Chrome 中,如果直接開啟,會報跨域錯誤,必須開啟伺服器,保證檔案同源才可以有效果。

為了驗證這個效果你可以:

cnpm install http-server -g

然後進入該目錄,執行

http-server

在瀏覽器開啟 http://localhost:8080/ 即可檢視效果。

列印的順序為:

載入了 add 模組
載入了 multiply 模組
載入了 square 模組
2
9

跟 require.js 的執行結果是一致的,也就是將需要使用的模組先載入完再執行程式碼。

ES6 與 CommonJS

引用阮一峰老師的 《ECMAScript 6 入門》

它們有兩個重大差異。

  1. CommonJS 模組輸出的是一個值的拷貝,ES6 模組輸出的是值的引用。
  2. CommonJS 模組是執行時載入,ES6 模組是編譯時輸出介面。

第二個差異可以從兩個專案的列印結果看出,導致這種差別的原因是:

因為 CommonJS 載入的是一個物件(即module.exports屬性),該物件只有在指令碼執行完才會生成。而 ES6 模組不是物件,它的對外介面只是一種靜態定義,在程式碼靜態解析階段就會生成。

重點解釋第一個差異。

CommonJS 模組輸出的是值的拷貝,也就是說,一旦輸出一個值,模組內部的變化就影響不到這個值。

舉個例子:

// 輸出模組 counter.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
    counter: counter,
    incCounter: incCounter,
};
// 引入模組 main.js
var mod = require(`./counter`);

console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter); // 3

counter.js 模組載入以後,它的內部變化就影響不到輸出的 mod.counter 了。這是因為 mod.counter 是一個原始型別的值,會被快取。

但是如果修改 counter 為一個引用型別的話:

// 輸出模組 counter.js
var counter = {
    value: 3
};

function incCounter() {
    counter.value++;
}
module.exports = {
    counter: counter,
    incCounter: incCounter,
};
// 引入模組 main.js
var mod = require(`./counter.js`);

console.log(mod.counter.value); // 3
mod.incCounter();
console.log(mod.counter.value); // 4

value 是會發生改變的。不過也可以說這是 “值的拷貝”,只是對於引用型別而言,值指的其實是引用。

而如果我們將這個例子改成 ES6:

// counter.js
export let counter = 3;
export function incCounter() {
  counter++;
}

// main.js
import { counter, incCounter } from `./counter`;
console.log(counter); // 3
incCounter();
console.log(counter); // 4

這是因為

ES6 模組的執行機制與 CommonJS 不一樣。JS 引擎對指令碼靜態分析的時候,遇到模組載入命令 import,就會生成一個只讀引用。等到指令碼真正執行時,再根據這個只讀引用,到被載入的那個模組裡面去取值。換句話說,ES6 的 import 有點像 Unix 系統的“符號連線”,原始值變了,import 載入的值也會跟著變。因此,ES6 模組是動態引用,並且不會快取值,模組裡面的變數繫結其所在的模組。

Babel

鑑於瀏覽器支援度的問題,如果要使用 ES6 的語法,一般都會藉助 Babel,可對於 import 和 export 而言,只借助 Babel 就可以嗎?

讓我們看看 Babel 是怎麼編譯 import 和 export 語法的。

// ES6
var firstName = `Michael`;
var lastName = `Jackson`;
var year = 1958;

export {firstName, lastName, year};
// Babel 編譯後
`use strict`;

Object.defineProperty(exports, "__esModule", {
  value: true
});
var firstName = `Michael`;
var lastName = `Jackson`;
var year = 1958;

exports.firstName = firstName;
exports.lastName = lastName;
exports.year = year;

是不是感覺有那麼一點奇怪?編譯後的語法更像是 CommonJS 規範,再看 import 的編譯結果:

// ES6
import {firstName, lastName, year} from `./profile`;
// Babel 編譯後
`use strict`;

var _profile = require(`./profile`);

你會發現 Babel 只是把 ES6 模組語法轉為 CommonJS 模組語法,然而瀏覽器是不支援這種模組語法的,所以直接跑在瀏覽器會報錯的,如果想要在瀏覽器中執行,還是需要使用打包工具將程式碼打包。

webpack

Babel 將 ES6 模組轉為 CommonJS 後, webpack 又是怎麼做的打包的呢?它該如何將這些檔案打包在一起,從而能保證正確的處理依賴,以及能在瀏覽器中執行呢?

首先為什麼瀏覽器中不支援 CommonJS 語法呢?

這是因為瀏覽器環境中並沒有 module、 exports、 require 等環境變數。

換句話說,webpack 打包後的檔案之所以在瀏覽器中能執行,就是靠模擬了這些變數的行為。

那怎麼模擬呢?

我們以 CommonJS 專案中的 square.js 為例,它依賴了 multiply 模組:

console.log(`載入了 square 模組`)

var multiply = require(`./multiply.js`);


var square = function(num) { 
    return multiply.multiply(num, num);
};

module.exports.square = square;

webpack 會將其包裹一層,注入這些變數:

function(module, exports, require) {
    console.log(`載入了 square 模組`);

    var multiply = require("./multiply");
    module.exports = {
        square: function(num) {
            return multiply.multiply(num, num);
        }
    };
}

那 webpack 又會將 CommonJS 專案的程式碼打包成什麼樣呢?我寫了一個精簡的例子,你可以直接複製到瀏覽器中檢視效果:

// 自執行函式
(function(modules) {

    // 用於儲存已經載入過的模組
    var installedModules = {};

    function require(moduleName) {

        if (installedModules[moduleName]) {
            return installedModules[moduleName].exports;
        }

        var module = installedModules[moduleName] = {
            exports: {}
        };

        modules[moduleName](module, module.exports, require);

        return module.exports;
    }

    // 載入主模組
    return require("main");

})({
    "main": function(module, exports, require) {

        var addModule = require("./add");
        console.log(addModule.add(1, 1))

        var squareModule = require("./square");
        console.log(squareModule.square(3));

    },
    "./add": function(module, exports, require) {
        console.log(`載入了 add 模組`);

        module.exports = {
            add: function(x, y) {
                return x + y;
            }
        };
    },
    "./square": function(module, exports, require) {
        console.log(`載入了 square 模組`);

        var multiply = require("./multiply");
        module.exports = {
            square: function(num) {
                return multiply.multiply(num, num);
            }
        };
    },

    "./multiply": function(module, exports, require) {
        console.log(`載入了 multiply 模組`);

        module.exports = {
            multiply: function(x, y) {
                return x * y;
            }
        };
    }
})

最終的執行結果為:

載入了 add 模組
2
載入了 square 模組
載入了 multiply 模組
9

參考

ES6 系列

ES6 系列目錄地址:https://github.com/mqyqingfeng/Blog

ES6 系列預計寫二十篇左右,旨在加深 ES6 部分知識點的理解,重點講解塊級作用域、標籤模板、箭頭函式、Symbol、Set、Map 以及 Promise 的模擬實現、模組載入方案、非同步處理等內容。

如果有錯誤或者不嚴謹的地方,請務必給予指正,十分感謝。如果喜歡或者有所啟發,歡迎 star,對作者也是一種鼓勵。


相關文章