基于 Verdaccio + Docker 搭建私有 NPM 仓库

前言

因公司多个前端项目内有相同的功能代码，且没有统一管理。在遇到某一个功能有 bug 需要修复的时候，其他的项目因为都是用的同样一份 copy，所以所有项目都需要修改发版。在项目多了之后，就造了很大的时间耗费。为了解决这个问题，目前有 3 个方案：

1. webpack 内使用 external，将公用库打包成 umd 格式，使用 script 标签引入。
2. federation module 将公用库抽离为 share module。
3. 将公用库发布至私有 npm。

1. external：是个很诱人的方案，通过 script 链接引入，修改了公共库发布，反向代理设置该 script 不缓存，那么连业务代码发布环节都省了。但是考虑到后期可能会有更多的其他包，很多个 script 在 html head 内首先会让页面空白时间加长，不利于减少首屏代码体积。所以该方案暂不考虑。
2. federation module： 仅在 webpack5 上可用，可惜公司项目都是 4，不然的话首选 federation module，有兴趣的同学可以去 webpack 官网了解下。
3. npm：可以设为私有仓库，保证了隐私性，但是就是需要部署和维护私有 npm 的服务，并且修改了公共库代码，业务项目也还是需要修改 package 的该库版本然后重新打包发布。不过好在对别人的依赖少，我这边搭好服务，其他人引用就可以，节约了其他同事的时间。

正文

详细的配置可以参考：Verdaccio 官网

安装 Verdaccio 镜像

docker pull verdaccio/verdaccio:4
复制代码

初始化配置项

cd /path/for/verdaccio
mkdir conf && mkdir storage && mkdir plugins
cd conf
vi config.yaml
复制代码

写入配置

往上一步中的 config.yaml 内写入下面内容

storage: ./storage
auth:
    htpasswd:
        file: ./htpasswd
uplinks:
    npmjs:
        url: https://registry.npmjs.org/
packages:
    "@*/*":
        access: $all
        publish: $authenticated
        proxy: npmjs
    "**":
        proxy: npmjs
logs:
- { type: stdout, format: pretty, level: http }
复制代码

在 packages 配置内可以描述为满足 "@*/*" 通配符的包名都会进入该匹配项， access 所有人的请求，publish 只有登录认证了才行，建议使用用户组的概念来定义可以推送名单，这样可以保证是可信赖的人推送的，那么上面 package 块的代码可以改成如下：

$user-group: user-a user-b user-c
packages:
    "@*/*":
        access: $all
        publish: $user-group
        proxy: npmjs
    "**":
        proxy: npmjs
复制代码

启动 Verdaccio 容器

V_PATH=/path/for/verdaccio; docker run -d -it --restart=always --rm --name verdaccio \
  -p 4873:4873 \
  -v $V_PATH/conf:/verdaccio/conf \
  -v $V_PATH/storage:/verdaccio/storage \
  -v $V_PATH/plugins:/verdaccio/plugins \
  verdaccio/verdaccio:4
复制代码

访问私有 npm 仓库并注册用户

根据上一步中设置容器暴露的端口：4873 于浏览器中访问，顺利打开则代表 npm 服务已经成功启动。

// 注册
npm adduser --registry http://{部署的 ip}:4873
// 登录
npm login --registry http://{部署的 ip}:4873
复制代码

发布包

以简单的测试包为例

1. 使用 yarn 初始化项目，建议使用 @xx/xxx 的方式命名包名。
2. 创建 index.js 导出个函数，留意 package.json 内需要将 main 选项设置为 index.js。
3. 可以使用 rollup 打包，但是因为是测试包，功能简单的话暂时可以不用。
4. 发布

npm publish --registry http://{部署的 ip}:4873

复制代码

安装包

设置局部 npm 仓库配置

指定符合 @xx 包空间的使用对应的 npm 仓库

npm：

• 项目根目录下新建 .npmrc, @xx 为给该私有仓库自定义的包名前缀，严格上说是包空间（Scope）

registry=https://registry.npm.taobao.org
@xx:registry=http://{部署的 ip}:4873

复制代码

yarn:

registry "https://registry.npm.taobao.org"
"@jf:registry" "http://{部署的 ip}:4873"
复制代码

安装

yarn add @xx/xxx
或者
npm install @xx/xxx
复制代码

总结

使用 Verdaccio 使得部署私有 npm 库变得比较轻松，本文从服务部署到完成包的安装，自己也踩了一些坑，希望能把踩过坑才总结出来的经验分享出来，谢谢阅读。