前端面试：内网npm私有仓库搭建

前言

前端团队沉淀一套通用的UI库、工具类、脚手架，不允许在公网发布，内网npm私有库搭建需求应运而生。如何在内网环境搭建npm私有仓库并使用？主角登场了 —— Verdaccio。接下来我来教大家使用 verdaccio 在内网环境中搭建npm私有仓库。

基础环境

为了避免因为基础环境不一致而产生意料之外的问题，基础环境要尽可能保持一致。

 

下载安装工具（nvm）

nvm国内镜像下载！

 

# 下载并安装nvm
curl -fsSL https://gitee.com/eagle_0810/nvm/raw/master/install.sh | bash
 
# 重载配置
source ~/.bashrc
 
# 验证执行安装成功
nvm --version
 
# 安装nodejs
nvm install v16.19.0
 
# 更换npm源为淘宝镜像
npm config set registry=https://registry.npmmirror.com

安装verdaccio、pm2

npm install -g verdaccio@5.19.1 pm2@5.2.2

修改verdaccio默认配置

其他更多配置可查看verdaccio官网

https://verdaccio.org/zh-CN/docs/configuration

 

# 执行verdaccio验证安装成功并生成配置文件
verdaccio
 
# 修改配置文件
vim /root/.config/verdaccio/config.yaml
 
# 修改页面标题
web:
  title: CloudWise-Verdaccio
 
# 上传npm包大小限制修改
max_body_size: 100mb
 
# 允许内外网其他设备访问
listen:
 - 0.0.0.0:4873
 
# 修改web端默认语言为中文
i18n:
 web: zh-CN

启动verdaccio服务

verdaccio是基于nodejs的应用，因此需要pm2守护verdaccio进程。

pm2 start verdaccio

注意：启动失败报错可执行以下命令查看pm2日志，根据日志修改报错并重新启动verdaccio服务。

pm2 logs verdaccio

 

验证是否部署成功

注意：开放对应端口（4873）

访问：http://ip:4873/

 

发布npm私有包

注意：发布私有包必须将镜像修改为私有镜像地址且私有npm包名称必须是"@{组织名}/{npm-name}"

修改镜像源地址

npm set registry http://ip:4873/

注册账号

输入以下命令后开始注册用户

npm adduser

 

登陆账号并验证是否登录成功

npm login
 
npm who am i

 

在项目package.json中配置包信息

如果从0开发的项目可以直接npm init

如果项目有package.json可直接手动修改

注意：私有包名称必须是"@{组织名}/{npm-name}"

例如：@cloudwise/map-common

 

 

发布、删除私有包

npm publish
 
npm unpublish 包名 --force

 

使用私有包

npm、yarn 切换回淘宝镜像，项目根目录下添加.npmrc、.yarnrc文件添加以下配置支持npm和yarn安装私有包。

 

# .npmrc 文件
# 指向内网私源 
@{组织名}:registry=http://ip:4873
 
# .yarnrc 文件
# 指向内网私源
"@{组织名}:registry" "http://ip:4873"