前端内网开发npm安装的几种方法小结
本文介绍了前端在内网环境下离线安装npm依赖的几种常见方法。主要涵盖搭建内网私有仓库(如使用verdaccio)以及通过npm pack将依赖打包为tgz文件后离线安装两种方式。文章详细说明了从联网电脑准备依赖、打包归档到拷贝至内网机器安装的完整流程,并涉及TypeScript配置及Node.js相关命令的使用。
1、介绍
近期有开发者咨询,如何在无法连接互联网的环境中安装项目依赖。通常情况下,开发环境是可以联网的,此时只需配置register并指向国内镜像源(如阿里云、淘宝、华为云、腾讯云等),即可快速从镜像服务器下载所需文件。
然而,部分开发场景受限于网络隔离,必须在内网环境中进行项目开发,这就需要通过离线方式执行npm install来安装各类依赖包。
2、非联网/离线安装方法
—2.1搭建内网私服
首先,可以通过一台具备联网条件的电脑搭建一个内网服务。这里推荐使用verdaccio,它是一个轻量级的私有npm代理注册服务。
//先安装一个代理服务
npm install -g verdaccio
//运行
verdaccio
//运行后的默认端口是4873,此时我们就可以设置镜像路径为这个代理地址
npm set registry http://localhost:4873/
//其他需求,如果你想要发布资源,推送到这个地址
npm publish --registry http://localhost:4873/
//项目成员安装依赖
npm install <package> --registry http://localhost:4873/
//也可以在项目中创建一个.npmrc文件
registry=http://localhost:4873/
—2.2npm pack 归档文件
接下来重点介绍另一种方法。
基本思路是:先使用一台联网电脑,将所有项目依赖完整安装好,然后通过脚本将依赖打包成压缩包,最后拷贝到指定的内网目录下。
为了跟上技术潮流,本文以TypeScript为例进行说明,关于基础的项目创建步骤此处略过,直接聚焦核心操作。
项目创建完成后,若需使用TypeScript,请执行命令tsc --init以生成tsconfig.json文件。在该配置文件中,需将module字段设置为commonjs,即module:“commonjs”。此处涉及.js、.cjs、.mjs等不同后缀的区别,后续有机会再行展开。
之所以选择commonjs,是因为在编写代码时我们可能使用了esm模块规范,而esm不支持__dirname变量,该变量仅在cjs环境中可用。经过编译后,最终输出的是cjs格式的代码。
随后,我新建了一个index.ts文件作为示例入口。
import { exeSync } from 'node:child-process'
import fs from 'node:fs'
import path from 'node:path'
//存放我们打包后的文件目录
const packageDir = path.join(__dirname, './packages')
//存在则不需要重复打包
if(!fs.existsSync(packageDir)){
fs.mkdirSync(packageDir, {recursive: true})
}
//读取node_modules文件目录下的文件
const node_modules = path.join(__dirname, './node_modules')
function buildPackage() {
const dirFileList = fs.readdirSync(node_modules ).filter(dit => {
//排除.开头文件和@符号开头文件,其他请自行排除
return !(dirFileList .startWith('.') || dirFileList .startWith('@'))
})
//遍历所查询到的文件
dirFileList && dirFileList .map(dir => {
//拿到文件的完整路径,后续打包路径
const modules = path.join(node_modules, dir)
//打包命令,需要引用,在第一行
exeSync('npm pack', { cwd: modules })
//将打包完的tgz文件找到
const tgzfile = fs.readdirSync(modules).find(file => {
return file.endsWith('.tgz')
})
if(tgzfile){
//将找到的打包tgz文件移动到指定的package目录中
fs.renameSync(path.join(modules,tgzfile), path.join(packageDir,tgzfile))
}
})
}
//执行
buildPackage()
//安装命令
npm install ./packages/xxxx.tgz
—2.3U盘拷贝
关于通过U盘等物理介质进行拷贝传输的操作,此处不再赘述。
总结
至此,关于前端内网开发中npm安装的几种方法介绍完毕。如需了解更多前端内网npm安装相关内容,欢迎搜索本站往期文章或继续浏览后续相关文章。希望大家今后能多多支持本站!
JS代码格式化后报错怎么办?解决Prettier与ESLint冲突
2026-11-04 16:18:04
Webpack/Vite中怎么将HTML文件导入为JS模块
2026-11-03 20:13:12
Three.js引入报错怎么办:模块导入与路径问题排查
2026-11-03 08:21:19
Swiper.js 基础教程:CDN 引入与 npm 安装初始化步骤
2026-11-02 09:18:52
不使用第三方工具怎么手动更新 Node.js
2026-11-02 09:17:40
