JavaScript模組化原理淺析

慕晨同學發表於2018-12-12
JavaScript

文章首發於：github.com/USTB-musion…

寫在前面

模組化簡單來說就是是指把一個複雜的系統分解到多個模組以方便編碼。JS模組化的大致流程為：CommonJS（服務端） -> AMD（瀏覽器端）-> UMD（相容了CommonJS和AMD） -> ES Module（ES6標準）。本文將從它們的用法進行介紹，簡單實現其原理。並簡易實現一個模組化打包工具webpack。

本文將從以下幾部分進行總結：

  1. CommonJS的用法及原理
  2. AMD的用法及原理
  3. ES2015標準化
  4. 自動化構建
  5. 簡易實現webpack

CommonJS

CommonJS 是一種使用廣泛的JavaScript模組化規範，核心思想是通過require方法來同步地載入依賴的其他模組，通過 module.exports 匯出需要暴露的介面。

CommonJS的用法

採用CommonJS來進行匯入匯出的程式碼用法如下：

// 用require方法匯入
const someFun= require('./moduleA');
someFun();

// 用module.exports匯出
module.exports = someFunc;
複製程式碼

CommonJS原理

a.js：

console.log('aaa');
exports.name = '這是a模組的內容';
複製程式碼

b.js：

let fs = require('fs');
let path = require('path');
let b = req('./a.js');
// req即使CommonJS中的require方法
function req(mod) {
    let filename = path.join(__dirname, mod);
    let content = fs.readFileSync(filename, 'utf8');
    /**
       * 最後一個引數是函式的內容體,相當於以下函式
       *function fn(exports, module, require, __dirname, __filename) {
       *  module.exports = '這是另外一個檔案匯出的內容'
       *  return module.exports
       *}
    */
    let fn = new Function('exports', 'require', 'module', '__filename', '__dirname', content + '\n return module.exports;');
    let module = {
        exports: {}
    };

    return fn(module.exports, req, module, __filename, __dirname);
}
複製程式碼

AMD

AMD 也是一種 JavaScript 模組化規範，與 CommonJS 最大的不同在於它採用非同步的方式去載入依賴的模組。 AMD 規範主要是為了解決針對瀏覽器環境的模組化問題，最具代表性的實現是 requirejs。

AMD 的優點：

  • 可在不轉換程式碼的情況下直接在瀏覽器中執行
  • 可載入多個依賴
  • 程式碼可執行在瀏覽器環境和 Node.js 環境下

AMD 的缺點：

  • JavaScript 執行環境沒有原生支援 AMD，需要先匯入實現了 AMD 的庫後才能正常使用。
// 使用define方法定義一個模組
define('a', [], function () {
    return 'a';
});
define('b', ['a'], function (a) {
    return a + 'b';
});
// 使用require來匯入和使用
require(['b'], function (b) {
    console.log(b);
});
複製程式碼

AMD的原理

let factories = {};
/**
 * 實現AMD的define方法
 * @param moduleName 模組的名字
 * @param dependencies 依賴
 * @param factory 工廠函式
*/
function define(modName, dependencies, factory) {
    factory.dependencies = dependencies;
    factories[modName] = factory;
}
/**
 * 實現AMD的require方法
 * @param mods 引入的模組
 * @param callback 回撥函式
 */
function require(modNames, callback) {
    let loadedModNames = modNames.map(function (modName) {
        let factory = factories[modName];
        let dependencies = factory.dependencies;
        let exports;
        require(dependencies, function (...dependencyMods) {
            exports = factory.apply(null, dependencyMods);
        });
        return exports;
    })
    callback.apply(null, loadedModNames);
}
複製程式碼

ES2015模組化

ES2015 模組化是ECMA提出的JavaScript模組化規範，它在語言的層面上實現了模組化。瀏覽器廠商和Node.js 都宣佈要原生支援該規範。它將逐漸取代CommonJS和AMD規範，成為瀏覽器和伺服器通用的模組解決方案。 採用 ES2015 模組化匯入及匯出時的程式碼如下:

// 使用import匯入
import { name } from './person.js';

// 使用export匯出
export const name = 'musion';
複製程式碼

ES2015模組雖然是終極模組化方案，但它的缺點在於目前無法直接執行在大部分 JavaScript 執行環境下，必須通過構建工具轉換成標準的 ES5 後才能正常執行。

自動化構建

自動化構建就是做這件事情，把原始碼轉換成釋出到線上的可執行 JavaScrip、CSS、HTML 程式碼，包括如下內容：

  • 程式碼轉換：ECMASCRIPT6 編譯成 ECMASCRIPT5、LESS 編譯成 CSS 等。
  • 檔案優化：壓縮 JavaScript、CSS、HTML 程式碼，壓縮合並圖片等。
  • 程式碼分割：提取多個頁面的公共程式碼、提取首屏不需要執行部分的程式碼讓其非同步載入。
  • 模組合併：在採用模組化的專案裡會有很多個模組和檔案，需要構建功能把模組分類合併成一個檔案。
  • 自動重新整理：監聽本地原始碼的變化，自動重新構建、重新整理瀏覽器。
  • 程式碼校驗：在程式碼被提交到倉庫前需要校驗程式碼是否符合規範，以及單元測試是否通過。
  • 自動釋出：更新完程式碼後，自動構建出線上釋出程式碼並傳輸給釋出系統。

webpack

webpack 是一個打包模組化 JavaScript 的工具，在 webpack 裡一切檔案皆模組，通過 Loader 轉換檔案，通過 Plugin 注入鉤子，最後輸出由多個模組組合成的檔案。Webpack 專注於構建模組化專案。

一切檔案： JavaScript、CSS、SCSS、圖片、模板，在 Webpack 眼中都是一個個模組，這樣的好處是能清晰的描述出各個模組之間的依賴關係，以方便 Webpack 對模組進行組合和打包。 經過 Webpack 的處理，最終會輸出瀏覽器能使用的靜態資源。

webpack簡單揭祕

用webpack來進行打包構建的時候，檢視打包?之後的檔案，刪掉多餘的程式碼，剩下的核心程式碼如下：

(function (modules) {
    function require(moduleId) {
        var module = {
            exports: {}
        };
        // moduleId -> 模組的名字
        modules[moduleId].call(module.exports, module, module.exports, require);
        return module.exports;

    }
    return require("./index.js");
}) ({
    "./index.js":
    (function (module, exports, require) {
        eval("console.log('hello');\n\n");
    })
});
複製程式碼

簡易實現一個webpack

#! /usr/bin/env node
// 這個檔案用來描述如何打包
const pathLib = require('path');
const fs = require('fs');
let ejs = require('ejs');
let cwd = process.cwd();
let { entry, output: { filename, path } } = require(pathLib.join(cwd, './webpack.config.js'));
let script = fs.readFileSync(entry, 'utf8');
let bundle = `
(function (modules) {
    function require(moduleId) {
        var module = {
            exports: {}
        };
        modules[moduleId].call(module.exports, module, module.exports, require);
        return module.exports;

    }
    return require("<%-entry%>");
})
    ({
        "<%-entry%>":
            (function (module, exports, require) {
                eval("<%-script%>");
            })
    });
`
let bundlejs = ejs.render(bundle, {
    entry,
    script
});
try {
    fs.writeFileSync(pathLib.join(path, filename), bundlejs);
} catch (e) {
    console.error('編譯失敗 ', e);
}
console.log('compile sucessfully!');
複製程式碼

依賴其它模組的情況

#! /usr/bin/env node
// 這個檔案用來描述如何打包
const pathLib = require('path');
const fs = require('fs');
let ejs = require('ejs');
let cwd = process.cwd();
let { entry, output: { filename, path } } = require(pathLib.join(cwd, './webpack.config.js'));
let script = fs.readFileSync(entry, 'utf8');
let modules = [];
script.replace(/require\(['"](.+?)['"]\)/g, function () {
    let name = arguments[1];
    let script = fs.readFileSync(name, 'utf8');
    modules.push({
        name,
        script
    });
});
let bundle = `
(function (modules) {
    function require(moduleId) {
        var module = {
            exports: {}
        };
        modules[moduleId].call(module.exports, module, module.exports, require);
        return module.exports;
    }
    return require("<%-entry%>");
})
    ({
        "<%-entry%>":
            (function (module, exports, require) {
                eval(\`<%-script%>\`);
            })
       <%if(modules.length>0){%>,<%}%>
        <%for(let i=0;i<modules.length;i++){
            let module = modules[i];%>   
            "<%-module.name%>":
            (function (module, exports, require) {
                eval(\`<%-module.script%>\`);
            })
        <% }%>    
    });
`
let bundlejs = ejs.render(bundle, {
    entry,
    script,
    modules
});
try {
    fs.writeFileSync(pathLib.join(path, filename), bundlejs);
} catch (e) {
    console.error('編譯失敗 ', e);
}
console.log('compile sucessfully!');
複製程式碼

參考資料

精讀 js 模組化發展

珠峰前端架構師課程

補充閱讀

JavaScript 模組化七日談

JavaScript模組化程式設計簡史（2009-2016）

相關文章