深入理解SystemJS

隨著前端工程化的發展，如何解決模塊化問題變得越來越重要。SystemJS通過支持AMD、CommonJS和ES6模塊等多種模塊格式，成為了一個極其靈活的模塊載入器。本文將從不同方面深入剖析SystemJS的原理和使用方法，以期對讀者更好地理解SystemJS的應用。

一、概述

SystemJS是由 Guy Bedford 創建的一個JavaScript模塊載入器，可以讓在瀏覽器環境中使用 AMD、CommonJS、ES6 模塊格式，同時還支持 SystemJS 模塊格式。SystemJS 可以自動載入依賴模塊，無需預先編譯。

首先需要明確的一點是，SystemJS不是一個模塊打包工具，它只是負責模塊的載入和處理。它能夠使代碼更具擴展性，使得前端的代碼更加優雅，更加簡潔。

二、安裝和使用

在使用SystemJS之前，需要先下載它：

    
    npm install systemjs --save

在HTML文件中載入SystemJS：

    
    <script src="node_modules/systemjs/dist/system.js"></script>

載入完成後，需要在<script>標籤中配置SystemJS：

    
    <script>
    SystemJS.config({
        baseURL: '/app',
        map: {
            'app': 'app.js'
        }
    });

    SystemJS.import('app');
    </script>

以上代碼為例，首先使用SystemJS.config()設置了系統各種模塊載入時所需的參數。baseURL表示根據相對路徑查找的基本路徑，在這裡是相對於’/’的app子目錄。map表示設置一個鍵值對，鍵名為模塊名，鍵值為文件路徑。

然後使用SystemJS.import()方法載入app.js，SystemJS自動解析依賴。載入完成後，代碼就可以運行了。

三、支持的模塊格式

現在我們來看看SystemJS所支持的模塊格式。

1. AMD

CommonJS模塊在Node.js中得到了廣泛的應用，但在瀏覽器中並沒有得到很好的支持。因此，AMD（非同步模塊定義）應運而生，其distinctive feature在於非同步載入模塊，因為在瀏覽器中模塊需要非同步載入避免阻塞載入，以儘可能減小網頁載入的時延。

AMD是由Dojo Foundation創造的。它使用函數的引用來引用依賴模塊，實現非同步載入，適合在瀏覽器環境中使用。典型的AMD實現有RequireJS。

在SystemJS中，可以通過AMD模塊的define()方法來定義模塊：

    
    define(['jquery'], function ($) {
        $('body').html('Hello World');
    });

2. CommonJS

CommonJS的出現，更多是為了解決前端無法使用很多Node.js模塊的問題，它的主要目的是將 JavaScript 代碼組織成可重用的部件。CommonJS模塊是同步載入模塊，因為在Node.js環境中文件輸入輸出通常是同步的。

CommonJS模塊可以通過下面的方式進行定義：

    
    var $ = require('jquery');
    $('body').html('Hello World');

3. ES6模塊

ES6模塊是ECMAScript2015引入的新模塊語法，它是JavaScript的官方解決方案，被認為是未來JS模塊的標準。

在JavaScript中，一個模塊就是一個獨立的文件。在ES6之前，載入這個模塊需要用 <script>標籤完成（當然也包括Node.js）。然而，有了ES6就可以用import和export語句來寫了，更接近其他語言的寫法，也更清晰。

ES6模塊可以通過以下方式來定義：

    
    import $ from 'jquery';
    $('body').html('Hello World');

4. SystemJS模塊

在需要時動態載入和執行模塊的系統。SystemJS模塊格式適合用於動態載入的模塊（例如從服務端載入），因為SystemJS使用RequireJS的載入器，但是改進了RequireJS的模塊格式。

    
    SystemJS.import('myModule.js').then(function (myModule) {
        myModule.doSomething();
    });

四、逆向分析SystemJS

SystemJS重新定義了ES模塊標準，使得可以在瀏覽器中使用ES模塊。它使用了ES6模塊標準的所有特性，且運行時也符合ES模塊的行為。

1. Loader

SystemJS實現了一個全新的「loader」概念，不同於Node.js使用的require()調用，也不同於瀏覽器的<script>標籤以及文檔對象模型（DOM）。

SystemJS中的 loader 負責模塊的載入和解析，包括解決模塊依賴關係、執行模塊代碼、以及處理一些模塊載入過程中的異常情況。

每個模塊都會通過 ES6 模塊中的 import 語句發起載入。此時，loader 會被調用並開始載入指定模塊的文件。

2. 非同步載入

在使用AMD載入方式的模塊中，我們需要在 define 函數中回調一個回調函數，以表明特定模塊的依賴已經就緒，模塊才能被實例化。但是，如果依賴項都是動態的，就很難編寫同步代碼了，這時候就需要非同步模式。

在SystemJS中，所有的 import 語句都是非同步的，不必再等待依賴項載入完成，即可在代碼中處理這些依賴。在載入器內部，將定時運行直到所有依賴項均已載入，並且該模塊已經執行完畢。

3. Legacy格式的模塊支持

SystemJS通過創造新的API，讓舊的模塊格式能夠與 ES6 格式一起工作。也就是說，使用AMD或CommonJS模塊格式，就像使用 ES6 一樣，它們的特性都是已知，並在代碼時明確引用。這樣就能很方便地在更好的、更快的系統上使用舊的模塊。

4. 鉤子

鉤子允許開發者在模塊載入的過程中採取某些操作。例如，一個鉤子可以在檢測到某個模塊需要被編譯執行時發生，還可以操作緩存等等。

五、總結

通過以上的內容可以看出，SystemJS的確是一個非常靈活、智能的模塊載入器。它不僅支持所有的JavaScript模塊載入方式，還能夠智能的根據模塊之間的依賴關係，非同步地載入模塊。對於大型工程，SystemJS能夠解決模塊之間複雜的依賴關係，提高代碼的可讀性和可維護性。希望本文的介紹和解析能夠對讀者更好地理解和使用SystemJS提供的強大功能。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/198563.html