前端离线开发指南

4,762 阅读2分钟

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

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

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

感谢阅读!