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

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

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

1.  **架設 Proxy 代理伺服器**：我先前有寫過一篇文章，說明如何設定代理伺服器。請參考【[如何在強制使用代理伺服器的環境下設定 git, npm, bower, gem, ionic 工具](https://blog.miniasp.com/post/2015/09/02/proxy-settings-for-git-npm-bower-gem-ionic.aspx)】。不過，公司都不讓你連外網了，怎麼可能讓你架設 Proxy 代理伺服器呢？
2.  **將整個 npm registry 下載**：這將會耗用大量磁碟空間，對某些企業來說不太可能接受下載一大堆用不到的 npm 套件，而且有資安風險。
3.  **架設 [local-npm](https://github.com/local-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` 時的預設值。我現在的電腦，自從上次舉辦【[全端工程師的修練：實作資料篩選功能](https://www.facebook.com/will.fans/videos/2124246790937787/)】直播之後，就改成預設 `--prefer-offline` 設定了，因為上次直播在我執行完 `npm install` 之後，直播畫面就開始累格了... Orz

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

```bash
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
```

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

### 相關連結

-   [config | npm Documentation](https://docs.npmjs.com/misc/config#prefer-offline)
-   [Here’s what you need to know about npm 5 - Pusher Blog](https://blog.pusher.com/what-you-need-know-npm-5/)
-   [AddyOsmani.com - Offline installation of npm packages](https://addyosmani.com/blog/using-npm-offline/)
-   [add "-offline" shorthand for "--cache-min 999999" by lewiscowper · Pull Request #10331 · npm/npm](https://github.com/npm/npm/pull/10331)