The Will Will Web | 前端工程研究:如何在企業內部使用「完全離線」的方式安裝 npm 套件

The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

前端工程研究:如何在企業內部使用「完全離線」的方式安裝 npm 套件

許多企業在設法導入前端工程的過程中,最大的進入障礙竟然是「無法使用 npm 安裝套件」。因為真的有很多企業在嚴格執行資訊安全政策的情況下,所有開發者都無法從公司內部環境連到 npm 網站下載套件。這篇文章,我將分享幾個小技巧,幫助企業開發人員可以在內部實現簡易的 npm 離線快取。

一般來說,要實現完全離線的 npm 安裝有幾種作法:

  1. 架設 Proxy 代理伺服器:我先前有寫過一篇文章,說明如何設定代理伺服器。請參考【如何在強制使用代理伺服器的環境下設定 git, npm, bower, gem, ionic 工具��。不過,公司都不讓你連外網了,怎麼可能讓你架設 Proxy 代理伺服器呢?
  2. 將整個 npm registry 下載:這將會耗用大量磁碟空間,對某些企業來說不太可能接受下載一大堆用不到的 npm 套件,而且有資安風險。
  3. 架設 local-npm 伺服器:這個也是一個不錯的解決方案。但是對資安控管嚴格的企業來講,要在組織內部架設一台伺服器,可能也不太容易。

我最近研究出另外一個更簡單的作法,可以幫助企業開發者能在「完全離線」的狀態下,成功安裝 npm 套件。

自從 npm 推出 v5 之後 (目前最新版為 v6 版本),執行 npm install 的過程出現了以下四個新參數:

  • npm install --offline
    • 安裝套件時,完全不會用到任何網路連線。
  • npm install --online
    • 安裝套件時,完全不會用到任何離線快取。
  • npm install --prefer-offline
    • 安裝套件時,優先讀取離線快取套件,找不到的才到線上下載套件。
  • npm install --prefer-online (預設選項)
    • 安裝套件時,優先從線上下載套件,無法連線時才找離線快取。

這幾個設定,都可以透過 npm config 來設定 npm install 時的預設值。我現在的電腦,自從上次舉辦【全端工程師的修練:實作資料篩選功能】直播之後,就改成預設 --prefer-offline 設定了,因為上次直播在我執行完 npm install 之後,直播畫面就開始累格了... Orz

以下是將 npm install 預設皆採用 --prefer-offline 的方式:

npm config set prefer-offline true

不過,如果有人想要真的做到「完全離線」安裝的話,保留離線快取的套件就變得非常重要。以下我整理了一份 SOP (標準作業流程),幫助你在公司內部可以做到完全離線開發!

首先,你要先準備好一個可以正常上網的環境,並透過以下命令進行安裝:

ng new ng-npm-cache --skip-install --skip-git
cd ng-npm-cache
npm install --online --cache=G:\npm-cache

這個安裝的過程,你可以看到我做了幾件事:

  1. 我在執行 ng new 的時候,明確指定不要執行 npm install 的選項。( --skip-install )
  2. 進入暫時的 ng-npm-cache 目錄
  3. 明確指定 --online 可以確保你不會抓到舊的離線快取套件。加上 --cache 參數則是讓你指定「離線快取的 npm 套件」要放在哪個資料夾。

在安裝完成之後,你就可以將上述的 ng-npm-cache 目錄砍掉了!然後將 G:\npm-cache 壓縮起來,帶到公司的電腦,隨便解壓縮到任意目錄中。

假設我們將離線快取目錄解壓縮到公司的 \\10.0.0.1\npm-cache 共用目錄下,這時公司的同事只要先執行以下命令,讓每台電腦的快取目錄預設都指向這個共用目錄:

npm config set prefer-offline true
npm config set cache "\\\\10.0.0.1\\npm-cache"

現在,你可以開始測試「完全離線」的安裝過程,透過以下命令執行就可以立刻進行模擬測試:

npm install --offline -g @angular/cli

如果可以安裝成功,就可以再測試用 ng new 來建立 Angular 應用程式:

ng new demo1 --routing

如果你短時間不需要升級套件,這個離線快取目錄是不需要更新的。如果需要更新的話,就照著上述步驟更新離線快取目錄,再將檔案帶到公司覆蓋共用目錄即可!

相關連結