模塊化JavaScript：SystemJS和JSPM的初學者指南
- William Shakespeare原創
- 2025-02-18 11:28:42373瀏覽
鑰匙要點
- > SystemJS和JSPM是可以用來克服JavaScript模塊化的局限性的工具。 SystemJS是一個模塊加載程序，可以在運行時以任何流行格式導入模塊，而JSPM是構建在SystemJS之上的軟件包管理器。他們共同管理軟件包及其依賴項，從而可以更輕鬆地安裝和加載依賴項。 > 使用JSPM和SystemJS設置項目的過程涉及創建目錄，初始化NPM項目並在本地安裝JSPM。設置後，JSPM和SystemJS可用於安裝和管理來自不同源，transpile ES6代碼的軟件包，並處理依賴項。
- JSPM也用作模塊Bundler，將所有文件和庫組合在一起，並將文件使用的模塊系統轉換為SystemJS樣式模塊。此過程對性能是有益的，應用於生產應用。
- >
本文由阿德里安·桑杜（Adrian Sandu）和馬克·布朗（Mark Brown）審查。感謝SitePoint所有的同行評審員製作SitePoint內容的最佳狀態！
在過去的幾年中，JavaScript編程語言在流行中爆炸了。它已成為開發豐富的Web應用程序以及混合移動應用程序的首選語言。隨著JavaScript項目的越來越複雜，開發人員正在經歷該語言的新要求。其中之一是模塊化。
據我所知，必須實現模塊化的兩個方面：
安裝為依賴項的外部模塊
ES6將標準模塊語法帶到JavaScript和加載程序規範。這是向前邁出的好一步，但是在寫作時，沒有瀏覽器可以在本機上加載ES6模塊。這意味著，如果您今天想使用模塊，則需要使用模塊bundler。
>- 有關當前景觀的概述，請參見：理解JavaScript模塊：捆綁和transpliting
- >更重要的是，我們沒有允許我們下載軟件包並將其包含在應用程序中的軟件包管理器。包裝經理（例如Bower和NPM）幫助我們下載前端依賴項而無需訪問項目的網站，但這是 。
什麼是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文件夾中窺視您，您將看到：
>- github子目錄
- npm子目錄 SystemJS模塊加載程序的主文件
- JSPM創建GITHUB和NPM目錄的原因是，它在這些註冊表的頂部之上，只需使所需的NPM或GitHub軟件包別名。此外，GitHub目錄包含一個SystemJS插件，用於從GitHub加載JSON文件，NPM目錄包含與Babel相關的軟件包，我們將需要將ES6代碼傳輸
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進行了呼叫。該模塊返回一個任何其他消費模塊都可以使用參數調用的函數。
> summarymodal.js：此文件使用ES6樣式模塊。它加載了Bootstrap的JavaScript庫。然後，它導出一個接受一塊逃脫的HTML的函數，並在將其顯示在模態彈出窗口之前，然後將HTML文本刪除。 - 。 display.js：此文件使用commonjs樣式模塊。它將jQuery和以上兩個文件作為依賴項加載。它調用search.js暴露的方法獲取結果，然後在UI上的HTML表中渲染這些數據。此外，它利用了SummaryModal.js所公開的方法在表上單擊鏈接按鈕時顯示模態。
- 如前所述，SystemJS了解JavaScript中的所有模塊系統。我們可以使用SystemJS加載上述所有三個文件。
要使這些腳本運行，我們需要在HTML頁面上加載System.js和Config.js。之後，我們將使用SystemJS模塊加載程序加載Display.js文件。由於此文件指的是存儲庫中的其他文件，並且這些文件加載了所需的庫，因此我們不需要加載任何其他文件。
<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文件中。這是更新的參考集：
- >請注意，我們沒有刪除導入語句以加載模塊display.js。該語句不再加載文件，而是加載了已在build.js文件中可用的SystemJS模塊。
>您可以按照項目的回复文件中的說明進行操作。您可以在開發人員工具中的單個文件中瀏覽代碼並通過它們進行調試。
結論JSPM和SystemJS的組合提供了一種統一的安裝和加載依賴性方法。該工具不僅使管理依賴項的工作更加容易，而且還為當今瀏覽器上的未來模塊系統打開了大門。正如我已經證明的那樣，JSPM易於設置和使用，這兩個原因有助於其日益普及。
您是否在項目中使用JSPM？為什麼？為什麼不呢？在下面的評論中讓我知道。 >經常詢問有關模塊化JavaScript，Systemjs和JSPM
的問題（常見問題解答）Systemjs和WebPack都是模塊捆綁包，但它們具有一些關鍵差異。 SystemJS是一個通用的動態模塊加載程序，在瀏覽器和NODEJS中加載ES6模塊，AMD，CONCORJS和全局腳本。它更像是一個模塊裝載機，而不是捆綁裝載機。另一方面，WebPack是現代JavaScript應用程序的靜態模塊捆綁包。它構建了一個依賴關係圖，其中包含每個模塊您的應用程序需求，並將它們包裝到一個或多個捆綁中。
>>如何安裝SystemJS？
我可以將systemjs與node.js一起使用嗎？是的，可以與node.js一起使用systemjs。它提供了一個通用模塊加載程序，可在瀏覽器和node.js中起作用。這使您可以編寫可以在客戶端和服務器之間共享的代碼。
>Systemjs如何處理依賴項？
Systemjs通過其配置來處理依賴項。您可以在SystemJS配置中指定模塊的路徑和依賴關係。加載模塊時，SystemJS也會自動加載其依賴項。
>使用模塊化JavaScript？
>模塊化JavaScript有什麼好處。它使您的代碼更有條理，更易於管理。它使您可以在應用程序的不同部分重複使用代碼。它還使測試您的代碼更容易，因為可以獨立測試每個模塊。 如何配置Systemjs？ > 可以使用system.config（）方法配置Systemjs。此方法接受指定配置選項的對象。您可以配置的某些選項包括路徑，地圖，軟件包和轉板器。
>我可以將systemjs與其他JavaScript框架一起使用嗎？
是的，可以與其他JavaScript框架一起使用SystemJS，例如角，反應和vue.js。它提供了一個通用模塊加載程序，該加載器可以從任何這些框架中加載模塊。 SystemJS的未來是什麼？ 以上是模塊化JavaScript：SystemJS和JSPM的初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！