无网络环境下React应用如何使用本地.tgz格式npm包

你之前操作触发联网的核心原因是：未指定离线模式时，哪怕指定了本地tgz文件路径，npm只要发现当前环境缺该包的子依赖，就会默认尝试连接公网源拉取缺失内容；手动解压tgz到node_modules的方式不会更新项目依赖映射文件，启动时依然会识别为缺包触发联网校验。

前置准备（在公司联网Ubuntu设备操作，无需安装任何程序） #

• 用设备自带浏览器，下载你需要安装的目标包对应版本的tgz文件，同时要把该包所有层级依赖（包括依赖的依赖）对应版本的tgz文件全部下载齐全，缺任何一个包都会导致安装时触发联网请求。

例：安装0.27.2版本axios时，除了axios本身的tgz，还要同步下载它依赖的follow-redirects、form-data等所有依赖包的对应版本tgz

• 所有下载完成的tgz文件统一放到一个文件夹中，拷贝到无网开发机的项目根目录下，比如新建offline-tarballs文件夹存放所有tgz包。

无网开发机安装操作（全程无网络请求） #

单包快速安装（适合依赖少的小包场景） #

直接执行带离线参数的安装命令，强制npm仅读取本地文件，不发起任何网络请求：

npm install ./offline-tarballs/你的目标包文件名.tgz --offline --save

如果执行过程中提示缺失某依赖，就把对应依赖的tgz按同样的命令格式补装，直到无报错即可。

禁止手动解压tgz文件到node_modules目录，该操作不会更新package.json、package-lock.json的依赖映射关系，项目启动、构建阶段依然会判定为依赖缺失触发联网校验。

批量缓存安装（适合多依赖包、批量安装场景，效率更高） #

1. 先把所有下载好的tgz包全部写入本地npm缓存，执行命令：

npm install ./offline-tarballs/*.tgz --offline --no-save

该命令会把所有tgz包的内容写入本地npm缓存，全程不会联网。
2. 缓存写入完成后，正常执行包安装命令即可，比如安装指定版本axios：

npm install axios@0.27.2 --offline --save

执行时npm会直接从本地缓存匹配所有需要的依赖包，不会发起任何网络请求。

常见问题处理 #

• 所有安装操作必须携带--offline参数，这是避免npm触发联网的核心配置。
• 不要修改下载好的tgz文件名，npm通过tgz包内部的元数据识别包名和版本，修改文件名容易导致识别失败。
• 如果之前安装失败残留了错误缓存，先执行npm cache clean --force清理本地缓存，再重新走安装流程即可。

内容的提问来源于stack exchange，提问作者Vinod Kumar