最近，由於我們的產品無法滿足客戶的某些需求，需要去客戶現場進行定製開發。
但客戶現場禁止聯網，只能把原始碼和工具拷貝過去。這樣問題就來了，我們專案基於 npm 線上包管理模式，所以就帶來了很多問題。
本文主要介紹如何搭建離線開發環境。
所需工具：
- nodejs 安裝包
- vscode 安裝包
- vscode 外掛安裝包
- yarn 安裝包
- yarn 快取包
- 專案原始碼包
準備（在有網的環境）
在官網下載 nodejs、vscode、yarn 安裝包。
vscode 擴充套件外掛
由於在 vscode 官網上找不到下載連結，需要拼接下載連結，以 prettier 外掛為例：
原始 url 地址：
https://${publisher}.gallery.vsassets.io/_apis/public/gallery/publisher/${publisher}/extension/${extension name}/${version}/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage
複製程式碼${publisher} ${extension name} ${version} 為變數。
開啟 prettier 外掛頁面：
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
複製程式碼根據上面的 url 地址，提取出 itemName 的值 esbenp.prettier-vscode
將原始地址中 ${publisher} 替換成 esbenp，${extension name} 替換成 prettier-vscode，在網頁中找到版本號為 1.6.1，將 ${version} 替換。
最終得到 prettier 的下載地址為：
https://esbenp.gallery.vsassets.io/_apis/public/gallery/publisher/esbenp/extension/prettier-vscode/1.6.0/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage
複製程式碼下載後，將檔名 Microsoft.VisualStudio.Services.VSIXPackage 修改為 prettier.vsix 。
下載其他外掛同理。
yarn 快取包
yarn 為你提供在離線模式下工作的能力。如果你在之前安裝過一個包，你可以不依賴網路連線再次安裝，這是前提。
首先刪除電腦上所有 yarn 安裝的快取:
yarn cache clean
複製程式碼開啟你的專案原始碼, 通過 yarn 命令安裝專案相關依賴（不使用全域性安裝，比如 webpack）:
yarn
複製程式碼安裝完成後，所有依賴會安裝到快取資料夾中。
獲取快取資料夾地址:
yarn cache dir
複製程式碼將快取檔案壓縮，命名為 yarn_cache.zip。
自此，準備工作就完成了。
實施（在無網路環境）
依次安裝 nodejs， yarn， vscode。
安裝 vscode 外掛
以 prettier 外掛為例：
開啟 cmd，進入 prettier 所在的資料夾，執行：
code --install-extension prettier.vsix
複製程式碼出現下面提示即安裝成功，重啟 vscode，安裝完成。
extension `prettier.vsix` was successful installed!
複製程式碼其他外掛同理。
yarn 快取
開啟 cmd，進入專案所在資料夾，執行：
yarn cache dir # 獲取快取檔案地址
複製程式碼將 yarn_cache.zip 解壓覆蓋至該檔案地址
啟動專案
在 vscode 開啟原始碼檔案，執行：
yarn
複製程式碼此時 yarn 會從快取路徑中下載所有依賴。
現在你可以在一臺離線的電腦上愉快的開發了。