許多企業在設法導入前端工程的過程中，最大的進入障礙竟然是「無法使用 npm 安裝套件」。因為真的有很多企業在嚴格執行資訊安全政策的情況下，所有開發者都無法從公司內部環境連到 npm 網站下載套件。這篇文章，我將分享幾個小技巧，幫助企業開發人員可以在內部實現簡易的 npm 離線快取。
一般來說，要實現完全離線的 npm 安裝有幾種作法：
- 架設 Proxy 代理伺服器：我先前有寫過一篇文章，說明如何設定代理伺服器。請參考【如何在強制使用代理伺服器的環境下設定 git, npm, bower, gem, ionic 工具】。不過，公司都不讓你連外網了，怎麼可能讓你架設 Proxy 代理伺服器呢？
- 將整個 npm registry 下載：這將會耗用大量磁碟空間，對某些企業來說不太可能接受下載一大堆用不到的 npm 套件，而且有資安風險。
- 架設 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
這個安裝的過程，你可以看到我做了幾件事：
- 我在執行
ng new 的時候，明確指定不要執行 npm install 的選項。( --skip-install )
- 進入暫時的
ng-npm-cache 目錄
- 明確指定
--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
如果你短時間不需要升級套件，這個離線快取目錄是不需要更新的。如果需要更新的話，就照著上述步驟更新離線快取目錄，再將檔案帶到公司覆蓋共用目錄即可！
相關連結