最近，由于我们的产品无法满足客户的某些需求，需要去客户现场进行定制开发。

但客户现场禁止联网，只能把源码和工具拷贝过去。这样问题就来了，我们项目基于 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 会从缓存路径中下载所有依赖。

现在你可以在一台离线的电脑上愉快的开发了。

感谢阅读！