JavaScript模塊化方案和工具都有哪些

這篇文章給大家介紹JavaScript模塊化方案和工具都有哪些，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

模塊化是大型前端項目的必備要素。JavaScript 從誕生至今，出現過各種各樣的模塊化方案，讓我們一起來盤點下吧。

IIFE 模塊

默認情況下，在瀏覽器宿主環境里定義的變量都是全局變量，如果頁面引用了多個這樣的 JavaScript 文件，很容易造成命名沖突。

// 定義全局變量 let count = 0; const increase = () => ++count; const reset = () => {     count = 0;     console.log("Count is reset."); };  // 使用全局變量 increase(); reset();

為了避免全局污染，可以用匿名函數包裹起來，這就是最簡單的 IIFE 模塊(立即執行的函數表達式)：

// 定義 IIFE 模塊 const iifeCounterModule = (() => {     let count = 0;     return {         increase: () => ++count,         reset: () => {             count = 0;             console.log("Count is reset.");         }     }; })();  // 使用 IIFE 模塊 iifeCounterModule.increase(); iifeCounterModule.reset();

IIFE 只暴露了一個全局的模塊名，內部都是局部變量，大大減少了全局命名沖突。

每個 IIFE 模塊都是一個全局變量，這些模塊通常有自己的依賴?？梢栽谀K內部直接使用依賴的全局變量，也可以把依賴作為參數傳給 IIFE：

// 定義帶有依賴的 IIFE 模塊 const iifeCounterModule = ((dependencyModule1, dependencyModule2) => {     let count = 0;     return {         increase: () => ++count,         reset: () => {             count = 0;             console.log("Count is reset.");         }     }; })(dependencyModule1, dependencyModule2);

一些流行的庫在早期版本都采用這模式，比如大名鼎鼎的 jQuery(最新版本也開始用 UMD 模塊了，后面會介紹)。

還有一種 IIFE，在 API 聲明上遵循了一種格式，就是在模塊內部提前定義了這些 API 對應的變量，方便 API 之間互相調用：

// Define revealing module. const revealingCounterModule = (() => {     let count = 0;     const increase = () => ++count;     const reset = () => {         count = 0;         console.log("Count is reset.");     };      return {         increase,         reset     }; })();  // Use revealing module. revealingCounterModule.increase(); revealingCounterModule.reset();

CommonJS 模塊(Node.js 模塊)

CommonJS 最初叫 ServerJS，是由 Node.js 實現的模塊化方案。默認情況下，每個 .js  文件就是一個模塊，模塊內部提供了一個module和exports變量，用于暴露模塊的 API。使用 require  加載和使用模塊。下面這段代碼定義了一個計數器模塊：

// 定義 CommonJS 模塊: commonJSCounterModule.js. const dependencyModule1 = require("./dependencyModule1"); const dependencyModule2 = require("./dependencyModule2");  let count = 0; const increase = () => ++count; const reset = () => {     count = 0;     console.log("Count is reset."); };  exports.increase = increase; exports.reset = reset; // 或者這樣： module.exports = {     increase,     reset };

使用這個模塊：

// 使用 CommonJS 模塊 const { increase, reset } = require("./commonJSCounterModule"); increase(); reset(); // 或者這樣： const commonJSCounterModule = require("./commonJSCounterModule"); commonJSCounterModule.increase(); commonJSCounterModule.reset();

在運行時，Node.js 會將文件內的代碼包裹在一個函數內，然后通過參數傳遞exports、module變量和require函數。

// Define CommonJS module: wrapped commonJSCounterModule.js. (function (exports, require, module, __filename, __dirname) {     const dependencyModule1 = require("./dependencyModule1");     const dependencyModule2 = require("./dependencyModule2");      let count = 0;     const increase = () => ++count;     const reset = () => {         count = 0;         console.log("Count is reset.");     };      module.exports = {         increase,         reset     };      return module.exports; }).call(thisValue, exports, require, module, filename, dirname);  // Use CommonJS module. (function (exports, require, module, __filename, __dirname) {     const commonJSCounterModule = require("./commonJSCounterModule");     commonJSCounterModule.increase();     commonJSCounterModule.reset(); }).call(thisValue, exports, require, module, filename, dirname);

AMD 模塊(RequireJS 模塊)

AMD(異步模塊定義)也是一種模塊格式，由 RequireJS  這個庫實現。它通過define函數定義模塊，并接受模塊名和依賴的模塊名作為參數。

// 定義 AMD 模塊 define("amdCounterModule", ["dependencyModule1", "dependencyModule2"],        (dependencyModule1, dependencyModule2) => {     let count = 0;     const increase = () => ++count;     const reset = () => {         count = 0;         console.log("Count is reset.");     };      return {         increase,         reset     }; });

也用 require加載和使用模塊：

require(["amdCounterModule"], amdCounterModule => {     amdCounterModule.increase();     amdCounterModule.reset(); });

跟 CommonJS 不同，這里的 requrie接受一個回調函數，參數就是加載好的模塊對象。

AMD 的define函數還可以動態加載模塊，只要給它傳一個回調函數，并帶上 require參數：

// Use dynamic AMD module. define(require => {     const dynamicDependencyModule1 = require("dependencyModule1");     const dynamicDependencyModule2 = require("dependencyModule2");      let count = 0;     const increase = () => ++count;     const reset = () => {         count = 0;         console.log("Count is reset.");     };      return {         increase,         reset     }; });

AMD 模塊還可以給define傳遞module和exports，這樣就可以在內部使用 CommonJS 代碼：

// 定義帶有 CommonJS 代碼的 AMD 模塊 define((require, exports, module) => {     // CommonJS 代碼     const dependencyModule1 = require("dependencyModule1");     const dependencyModule2 = require("dependencyModule2");      let count = 0;     const increase = () => ++count;     const reset = () => {         count = 0;         console.log("Count is reset.");     };      exports.increase = increase;     exports.reset = reset; });  // 使用帶有 CommonJS 代碼的 AMD 模塊 define(require => {     // CommonJS 代碼     const counterModule = require("amdCounterModule");     counterModule.increase();     counterModule.reset(); });

UMD 模塊

UMD(通用模塊定義)，是一種支持多種環境的模塊化格式，可同時用于 AMD 和 瀏覽器(或者 Node.js)環境。

兼容 AMD 和瀏覽器全局引入：

((root, factory) => {     // 檢測是否存在 AMD/RequireJS 的 define 函數     if (typeof define === "function" && define.amd) {         // 如果是，在 define 函數內調用 factory         define("umdCounterModule", ["deependencyModule1", "dependencyModule2"], factory);     } else {         // 否則為瀏覽器環境，直接調用 factory         // 導入的依賴是全局變量（window 對象的屬性）         // 導出的模塊也是全局變量（window 對象的屬性）         root.umdCounterModule = factory(root.deependencyModule1, root.dependencyModule2);     } })(typeof self !== "undefined" ? self : this, (deependencyModule1, dependencyModule2) => {     // 具體的模塊代碼     let count = 0;     const increase = () => ++count;     const reset = () => {         count = 0;         console.log("Count is reset.");     };      return {         increase,         reset     }; });

看起來很復雜，其實就是個 IIFE。代碼注釋寫得很清楚了，可以看看。

下面來看兼容 AMD 和 CommonJS(Node.js)模塊的 UMD：

(define => define((require, exports, module) => {     // 模塊代碼     const dependencyModule1 = require("dependencyModule1");     const dependencyModule2 = require("dependencyModule2");      let count = 0;     const increase = () => ++count;     const reset = () => {         count = 0;         console.log("Count is reset.");     };      module.export = {         increase,         reset     }; }))(// 判斷 CommonJS 里的 module 變量和 exports 變量是否存在     // 同時判斷 AMD/RequireJS 的define 函數是否存在     typeof module === "object" && module.exports && typeof define !== "function"         ? // 如果是 CommonJS/Node.js，手動定義一個 define 函數             factory => module.exports = factory(require, exports, module)         : // 否則是 AMD/RequireJS，直接使用 define 函數             define);

同樣是個 IIFE，通過判斷環境，選擇執行對應的代碼。

ES 模塊(ES6 Module)

前面說到的幾種模塊格式，都是用到了各種技巧實現的，看起來眼花繚亂。終于，在 2015 年，ECMAScript 第 6  版(ES 2015，或者 ES6 )橫空出世!它引入了一種全新的模塊格式，主要語法就是 import和epxort關鍵字。來看 ES6 怎么定義模塊：

// 定義 ES 模塊：esCounterModule.js 或 esCounterModule.mjs. import dependencyModule1 from "./dependencyModule1.mjs"; import dependencyModule2 from "./dependencyModule2.mjs";  let count = 0; // 具名導出： export const increase = () => ++count; export const reset = () => {     count = 0;     console.log("Count is reset."); }; // 默認導出 export default {     increase,     reset };

瀏覽器里使用該模塊，在 script標簽上加上type="module"，表明引入的是 ES 模塊。在 Node.js 環境中使用時，把擴展名改成  .mjs。

// Use ES module. //瀏覽器： <script type="module" src="esCounterModule.js"></script> or inline.  // 服務器：esCounterModule.mjs import { increase, reset } from "./esCounterModule.mjs"; increase(); reset(); // Or import from default export: import esCounterModule from "./esCounterModule.mjs"; esCounterModule.increase(); esCounterModule.reset();

瀏覽器如果不支持，可以加個兜底屬性：

<script nomodule>     alert("Not supported."); </script>

ES 動態模塊(ECMAScript 2020)

2020 年最新的 ESCMA 標準11版中引入了內置的 import函數，用于動態加載 ES  模塊。import函數返回一個 Promise，在它的then回調里使用加載后的模塊：

// 用 Promise API 加載動態 ES 模塊 import("./esCounterModule.js").then(({ increase, reset }) => {     increase();     reset(); });  import("./esCounterModule.js").then(dynamicESCounterModule => {     dynamicESCounterModule.increase();     dynamicESCounterModule.reset(); });

由于返回的是 Promise，那肯定也支持await用法：

// 通過 async/await 使用 ES 動態模塊 (async () => {     // 具名導出的模塊     const { increase, reset } = await import("./esCounterModule.js");     increase();     reset();     // 默認導出的模塊     const dynamicESCounterModule = await import("./esCounterModule.js");     dynamicESCounterModule.increase();     dynamicESCounterModule.reset(); })();

各平臺對import、export和動態import的兼容情況如下：

image.png

image.png

System 模塊

SystemJS 是一個 ES 模塊語法轉換庫，以便支持低版本的 ES。例如，下面的模塊是用 ES6 語法定義的：

// 定義 ES 模塊 import dependencyModule1 from "./dependencyModule1.js"; import dependencyModule2 from "./dependencyModule2.js"; dependencyModule1.api1(); dependencyModule2.api2();  let count = 0; // Named export: export const increase = function () { return ++count }; export const reset = function () {     count = 0;     console.log("Count is reset."); }; // Or default export: export default {     increase,     reset }

如果當前的運行環境(比如舊瀏覽器)不支持 ES6 語法，上面的代碼就無法運行。一種方案是把上面的模塊定義轉換成 SystemJS 庫的一個 API，  System.register：

// Define SystemJS module. System.register(["./dependencyModule1.js", "./dependencyModule2.js"],                  function (exports_1, context_1) {     "use strict";     var dependencyModule1_js_1, dependencyModule2_js_1, count, increase, reset;     var __moduleName = context_1 && context_1.id;     return {         setters: [             function (dependencyModule1_js_1_1) {                 dependencyModule1_js_1 = dependencyModule1_js_1_1;             },             function (dependencyModule2_js_1_1) {                 dependencyModule2_js_1 = dependencyModule2_js_1_1;             }         ],         execute: function () {             dependencyModule1_js_1.default.api1();             dependencyModule2_js_1.default.api2();             count = 0;             // Named export:             exports_1("increase", increase = function () { return ++count };             exports_1("reset", reset = function () {                 count = 0;                 console.log("Count is reset.");             };);             // Or default export:             exports_1("default", {                 increase,                 reset             });         }     }; });

這樣，import/export關鍵字就不見了。Webpack、TypeScript 等可以自動完成這樣的轉換(后面會講)。

SystemJS 也支持動態加載模塊：

// Use SystemJS module with promise APIs. System.import("./esCounterModule.js").then(dynamicESCounterModule => {     dynamicESCounterModule.increase();     dynamicESCounterModule.reset(); });

Webpack 模塊(打包 AMD，CJS，ESM)

Webpack 是個強大的模塊打包工具，可以將 AMD、CommonJS 和 ES Module  格式的模塊轉換并打包到單個 JS 文件。

Babel 模塊

Babel 是也個轉換器，可將 ES6+ 代碼轉換成低版本的 ES。前面例子中的計數器模塊用 Babel 轉換后的代碼是這樣的：

// Babel. Object.defineProperty(exports, "__esModule", {     value: true }); exports["default"] = void 0; function _interopRequireDefault(obj)           { return obj && obj.__esModule ? obj : { "default": obj }; }  // Define ES module: esCounterModule.js. var dependencyModule1 = _interopRequireDefault(require("./amdDependencyModule1")); var dependencyModule2 = _interopRequireDefault(require("./commonJSDependencyModule2")); dependencyModule1["default"].api1(); dependencyModule2["default"].api2();  var count = 0; var increase = function () { return ++count; }; var reset = function () {     count = 0;     console.log("Count is reset."); };  exports["default"] = {     increase: increase,     reset: reset };

引入該模塊的index.js將會轉換成：

// Babel. function _interopRequireDefault(obj)           { return obj && obj.__esModule ? obj : { "default": obj }; }  // Use ES module: index.js var esCounterModule = _interopRequireDefault(require("./esCounterModule.js")); esCounterModule["default"].increase(); esCounterModule["default"].reset();

以上是 Babel 的默認轉換行為，它還可以結合其他插件使用，比如前面提到的 SystemJS。經過配置，Babel 可將 AMD、CJS、ES  Module 轉換成 System 模塊格式。

TypeScript 模塊

TypeScript 是 JavaScript 的超集，可以支持所有 JavaScript 語法，包括 ES6  模塊語法。它在轉換時，可以保留 ES6 語法，也可以轉換成 AMD、CJS、UMD、SystemJS 等格式，取決于配置：

{     "compilerOptions": {         "module": "ES2020", // None, CommonJS, AMD, System, UMD, ES6, ES2015, ES2020, ESNext.     } }

TypeScript 還支持 module和namespace關鍵字，表示內部模塊。

module Counter {     let count = 0;     export const increase = () => ++count;     export const reset = () => {         count = 0;         console.log("Count is reset.");     }; }  namespace Counter {     let count = 0;     export const increase = () => ++count;     export const reset = () => {         count = 0;         console.log("Count is reset.");     }; }

都可以轉換成 JavaScript 對象：

var Counter; (function (Counter) {     var count = 0;     Counter.increase = function () { return ++count; };     Counter.reset = function () {         count = 0;         console.log("Count is reset.");     }; })(Counter || (Counter = {}));

隨著標準化推進，Node.js  和最新的現代瀏覽器都開始支持 ES 模塊格式。如果要在舊環境中使用模塊化，可以通過 Webpack、Babel、TypeScript、SystemJS  等工具進行轉換。

關于JavaScript模塊化方案和工具都有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。