模塊化JavaScript：SystemJS和JSPM的初學者指南-js教程-PHP中文網

鑰匙要點

如果您還沒有，則需要安裝node.js。這樣做的一種特別簡單的方法是使用版本管理器（例如NVM），並在此快速提示中詳細介紹。使用節點啟動並運行後，您可以通過從命令行中運行以下內容來在全球安裝JSPM：

Systemjs和WebPack都是模塊捆綁包，但它們具有一些關鍵差異。 SystemJS是一個通用的動態模塊加載程序，在瀏覽器和NODEJS中加載ES6模塊，AMD，CONCORJS和全局腳本。它更像是一個模塊裝載機，而不是捆綁裝載機。另一方面，WebPack是現代JavaScript應用程序的靜態模塊捆綁包。它構建了一個依賴關係圖，其中包含每個模塊您的應用程序需求，並將它們包裝到一個或多個捆綁中。

Systemjs如何處理依賴項？

首頁

web前端

js教程

模塊化JavaScript：SystemJS和JSPM的初學者指南

William Shakespeare

Feb 18, 2025 am 11:28 AM

模塊化JavaScript：SystemJS和JSPM的初學者指南

鑰匙要點

> SystemJS和JSPM是可以用來克服JavaScript模塊化的局限性的工具。 SystemJS是一個模塊加載程序，可以在運行時以任何流行格式導入模塊，而JSPM是構建在SystemJS之上的軟件包管理器。他們共同管理軟件包及其依賴項，從而可以更輕鬆地安裝和加載依賴項。
>

本文由阿德里安·桑杜（Adrian Sandu）和馬克·布朗（Mark Brown）審查。感謝SitePoint所有的同行評審員製作SitePoint內容的最佳狀態！在過去的幾年中，JavaScript編程語言在流行中爆炸了。它已成為開發豐富的Web應用程序以及混合移動應用程序的首選語言。隨著JavaScript項目的越來越複雜，開發人員正在經歷該語言的新要求。其中之一是模塊化。 據我所知，必須實現模塊化的兩個方面：> 我們作者的模塊

安裝為依賴項的外部模塊

ES6將標準模塊語法帶到JavaScript和加載程序規範。這是向前邁出的好一步，但是在寫作時，沒有瀏覽器可以在本機上加載ES6模塊。這意味著，如果您今天想使用模塊，則需要使用模塊bundler。

>更重要的是，我們沒有允許我們下載軟件包並將其包含在應用程序中的軟件包管理器。包裝經理（例如Bower和NPM）幫助我們下載前端依賴項而無需訪問項目的網站，但這是

在本文中，我們將看到如何使用JSPM和SystemJ來克服這些問題。

什麼是JSPM和SystemJS？

> JavaScript軟件包管理器（又稱JSPM）是一個軟件包管理器，可在SystemJS Universal Module Loader的頂部工作。它不是一個擁有自己的規則集的全新軟件包管理器，而是在現有軟件包源之上起作用。開箱即用，它可以與GitHub和NPM一起使用。由於大多數基於Bower的軟件包都是基於GitHub的，因此我們也可以使用JSPM安裝這些軟件包。它具有一個註冊表，該註冊表列出了大多數常用的前端軟件包，以便於安裝。像NPM一樣，它可以用來將包裹作為安裝過程中的開發和生產軟件包區分。

> SystemJS是一個模塊加載程序，可以在運行時以任何流行的格式導入模塊（Commonjs，umd，amd，es6）。它建立在ES6模塊裝載機多填充的頂部，並且足夠聰明，可以檢測使用的格式並適當地處理它。 SystemJ還可以使用插件將ES6代碼（帶有Babel或Traceur）或其他語言（例如TypeScript和Coffeescript）。在導入模塊之前，您可以在system.config（{...}）中配置這些東西。

> JSPM使用SystemJS來管理軟件包及其依賴項，因此我們不必擔心將軟件包以正確的順序加載。

>現在我們知道了JSPM和SystemJ是什麼，讓我們看看如何使用它們。 >

設置我們的環境

如果您還沒有，則需要安裝node.js。這樣做的一種特別簡單的方法是使用版本管理器（例如NVM），並在此快速提示中詳細介紹。使用節點啟動並運行後，您可以通過從命令行中運行以下內容來在全球安裝JSPM：

現在我們可以使用JSPM命令行接口。讓我們設置一個項目：

<span>npm install -g jspm
</span>

登入後複製

這將創建一個名為new-prok的目錄，將NPM項目初始化並在本地安裝JSPM。這是推薦的做事方法，因為它鎖定了JSPM版本的項目，並確保升級到全局JSPM不會改變您的應用程序的行為。

<span>mkdir new-project && cd new-project
</span><span>npm init -y
</span><span>npm install jspm --save-dev
</span>

登入後複製

>這種方法的另一個優點是，如果您的項目通過連續集成構建部署，則可以配置構建過程以使用本地JSPM軟件包，而不必在服務器上全球安裝JSPM。

>您可以使用JSPM -V確認本地版本。

在項目中使用JSPM，運行以下命令：>

$ jspm <span>-v
</span><span>0.16.34
</span>Running against <span>local jspm install.
</span>

登入後複製

>您將提示您進行多個設置，hit Enter接受默認值或鍵入其他值以更改它們。以下屏幕截圖顯示了一個使用默認設置執行命令的實例：>

jspm init

登入後複製

>目錄結構和配置

這將在項目根部創建一個名為config.js的文件，以及一個名為jspm_packages的文件夾。如果您在JSPM_PACKAGES文件夾中窺視您，您將看到：

config.js文件主要用於Systemjs。如果您打開它，您會發現它具有來自不同來源的軟件包，Babel的選項和包裝的名稱地圖的配置選項，以使其易於引用它們。使用JSPM安裝新軟件包時，此文件將自動更新。

該命令還更新package.json文件，並為JSPM添加了一個部分。帶有Init命令安裝的Babel軟件包被添加到項目的DEVDEDEDIES部分中。 >

>使用或不帶有s -Save選項的JSPM命令安裝的任何新軟件包都會添加到TheDepentencies部分，因此它成為生產依賴性。使用-save-dev選項安裝使依賴關係成為開發時間依賴關係，並將其保存到DevDepentencies部分。最後，JSPM為使用JSPM命令安裝的每個軟件包的config.js文件的地圖部分添加了一個條目。映射名稱可用於將庫加載到整個項目中的任何JavaScript文件中。任何軟件包依賴項也將添加到地圖部分。以下是config.js文件的地圖部分的片段，該片段顯示瞭如何映射jQuery和jQuery-UI的軟件包以及如何定義依賴關係：>

作為一個興趣點，您也可以在安裝模塊時自動生成這些映射：

<span>npm install -g jspm
</span>

登入後複製

這將使您可以在應用程序中的其他位置編寫以下內容：

<span>mkdir new-project && cd new-project
</span><span>npm init -y
</span><span>npm install jspm --save-dev
</span>

登入後複製

JSPM和SystemJS在ACTION

為了陪同本文，我製作了一個簡單的Wikipedia搜索樣本。您可以在此處找到GitHub回購。它是使用JSPM Init命令的默認選項進行設置的，因此它將Babel用作ES6 Transpiler。它還使用使用JSPM安裝的庫和引導程序。由於Bootstrap需要jQuery，JSPM在加載Bootstrap之前在Config.js文件中創建一個映射：

$ jspm <span>-v
</span><span>0.16.34
</span>Running against <span>local jspm install.
</span>

登入後複製

<span>npm install -g jspm
</span>

登入後複製

>回購建議的名稱，它查詢了Wikipedia搜索API並在視圖中顯示收到的數據。它使用jQuery的$ .ajax（）來呼叫API，在頁面上顯示結果，並具有在模態彈出窗口中顯示文章片段的鏈接。該示例在“腳本”文件夾下有三個JavaScript文件：

> search.js：此文件使用AMD樣式模塊。它是加載jQuery作為依賴項的加載，並對Wikipedia搜索API進行了呼叫。該模塊返回一個任何其他消費模塊都可以使用參數調用的函數。 >
。

要使這些腳本運行，我們需要在HTML頁面上加載System.js和Config.js。之後，我們將使用SystemJS模塊加載程序加載Display.js文件。由於此文件指的是存儲庫中的其他文件，並且這些文件加載了所需的庫，因此我們不需要加載任何其他文件。 >

Systemjs使用Babel即時將ES6文件轉移，並將其運行在瀏覽器中。這是一個（略微簡化的）演示，說明了這是什麼樣的：

<span>mkdir new-project && cd new-project
</span><span>npm init -y
</span><span>npm install jspm --save-dev
</span>

登入後複製

>但是，飛行對性能不利，不應在生產應用中使用。不要忘記JSPM是一個模塊捆綁器，所以讓我們捆綁。 >

我們可以使用以下命令為整個應用程序創建一個捆綁包：>

此命令執行以下操作：

>將所有文件和庫組合在一個名為build.js

$ jspm <span>-v
</span><span>0.16.34
</span>Running against <span>local jspm install.
</span>

登入後複製

的單個文件中

>將文件使用的模塊系統轉換為SystemJS樣式模塊

現在，我們需要將build.js文件加載到index.html文件中。這是更新的參考集：

。

>您可以按照項目的回复文件中的說明進行操作。您可以在開發人員工具中的單個文件中瀏覽代碼並通過它們進行調試。

結論

JSPM和SystemJS的組合提供了一種統一的安裝和加載依賴性方法。該工具不僅使管理依賴項的工作更加容易，而且還為當今瀏覽器上的未來模塊系統打開了大門。正如我已經證明的那樣，JSPM易於設置和使用，這兩個原因有助於其日益普及。

您是否在項目中使用JSPM？為什麼？為什麼不呢？在下面的評論中讓我知道。

經常詢問有關模塊化JavaScript，Systemjs和JSPM

的問題（常見問題解答） > SystemJS和WebPack之間的關鍵差異是什麼？

Systemjs和WebPack都是模塊捆綁包，但它們具有一些關鍵差異。 SystemJS是一個通用的動態模塊加載程序，在瀏覽器和NODEJS中加載ES6模塊，AMD，CONCORJS和全局腳本。它更像是一個模塊裝載機，而不是捆綁裝載機。另一方面，WebPack是現代JavaScript應用程序的靜態模塊捆綁包。它構建了一個依賴關係圖，其中包含每個模塊您的應用程序需求，並將它們包裝到一個或多個捆綁中。

>如何安裝SystemJS？

Systemjs可以通過NPM安裝。您可以使用以下命令將其安裝：NPM安裝Systemjs。安裝後，您可以使用'Systemjs''的導入{System}將其導入項目。

> JSPM在模塊化JavaScript中的作用是什麼？ Systemjs的軟件包管理器。它簡化了安裝和管理軟件包的過程。它還提供了一種從NPM，GitHub和其他來源安裝軟件包的統一方法。 JSPM還可以處理轉濾，允許您在ES6或Typescript中編寫代碼，並自動將其轉移到ES5。您可以使用system.import（）方法。此方法返回了解決模塊的承諾。以下是一個示例：system.import（'path/to/to/module.js'）。然後（function（module）{/ *使用module */}）。

我可以將systemjs與node.js一起使用嗎？是的，可以與node.js一起使用systemjs。它提供了一個通用模塊加載程序，可在瀏覽器和node.js中起作用。這使您可以編寫可以在客戶端和服務器之間共享的代碼。