组件库版本的管理和发布 - 自己撸组件库篇二

大家好，我是鸽鸽。

在上一篇文章中，我们使用pnpm的workspace特性，在没有发包的情况下，使用和测试子包。

本篇文章会学习如何进行私有npm库搭建，以及使用pnpm进行版本管理和发布。

相关代码在这 learn-create-compoents-lib/class2，建议搭配食用

系列文章
《搭建vue3 & ts组件库脚手架 - 自己撸组件库篇一》
《组件库版本的管理和发布 - 自己撸组件库篇二》
《在组件库中封装element-plus - 自己撸组件库篇三》

目标

使用verdaccio搭建私有npm库
使用pnpm的changesets发布版本

搭建私有npm库

基于安全和速度的考虑，在公司内部发布npm包都会去搭建私有库。

如果只用来测试没有敏感内容的话，可以跳过这段，直接发到公网也没什么问题。

现在可以用来搭建私有库的工具有很多，这里我使用verdaccio来进行搭建。

安装

bash 复制代码

npm install --global verdaccio

假设将数据存储到/data/verdaccio的话，按下面的方法配置

配置文件

bash 复制代码

mkdir /data/verdaccio
vim /data/verdaccio/config.yaml

编辑配置内容：

yaml 复制代码

storage: /data/verdaccio/storage
auth:
  htpasswd:
    file: /data/verdaccio/htpasswd
    algorithm: bcrypt
    rounds: 10
    max_users: -1
uplinks:
  npmjs:
    url: https://registry.npmjs.org/
packages:
  '@*/*':
    access: $authenticated
    publish: $authenticated
    proxy: npmjs
  '**':
    access: $authenticated
    publish: $authenticated
    proxy: npmjs
web:
    enable: true
    title: 鸽鸽的前端私有库
    login: true
listen: 0.0.0.0:4873
max_body_size: 100mb
log: { type: stdout, format: pretty, level: http }

配置说明：需要管理员手动新增用户，只有授权的用户才能查看和上传包，上游为npm官方库。

启动

新建启动脚本

bash 复制代码

vim /data/verdaccio/start.sh

内容：

bash 复制代码

verdaccio --config /data/verdaccio/config.yaml

添加执行权限

bash 复制代码

chmod +x /data/verdaccio/start.sh

使用pm2管理服务

bash 复制代码

npm i -g pm2
pm2 start /data/verdaccio/start.sh -n verdaccio

开机自启

bash 复制代码

pm2 startup
pm2 save

添加用户

生成 Bcrypt htpasswd 的文件并添加用户

bash 复制代码

htpasswd -bBc /data/verdaccio/htpasswd user password

继续添加一个用户的话用下面的命令

bash 复制代码

htpasswd -bB /data/verdaccio/htpasswd user2 password2

到这里搭建就结束了，服务在4873端口，可以用浏览器打开。可以用新建的用户测试一下能否登录。

修改项目配置

接入私有库

私有npm库搭建好后，在项目根目录新建一个.npmrc文件，内容如下：

ini 复制代码

registry = http://xxx.xxx.xxx.xxx:4873

这一行的意思是修改该项目的npm的源为自己搭建的私有库地址。

修改完成后，使用 pnpm login 命令输入账号、密码登录私有库，最后使用 pnpm i 重新拉取一遍。

指定要发布的包

在上一篇文章里，我们有一个主包和两个子包。其中两个子包components和resolver我们希望发布到npm库里去。主包是用来测试的，不可以发到库里。

我们根项目下的主包是用来测试用的，需要将主包改为私有禁止其提交到库里，我们可以在根目录的package.json中修改private为true。

json 复制代码

{
  "private": true
}

使用changesets发包

pnpm推荐使用changesets来进行包的管理，使用changesets可以轻松的管理版本和changelog记录的生成。

安装和初始化changesets

输入以下命令：

bash 复制代码

pnpm add -Dw @changesets/cli
pnpm changeset init

安装完成后会在根目录生成.changeset文件夹，这个文件夹要随git一起提交上去。

需要注意的是changesets默认需要在分支main上运行，可以去.changeset/config.json文件下修改baseBranch的值来改变主分支

修改版本和编写changelog

提交代码并切换分支到main合并后，运行pnpm changeset add命令选择要发布的包。

这里我们把两个子包用空格键都选上

下一步需要升级版本号，我们先来看看npm包版本号有那些规则：

npm版本号由三部分组成：主版本号（Major）、次版本号（Minor）和修订号（Patch），格式为"Major.Minor.Patch"。

主版本号（Major）：当进行不兼容的API修改时增加，表示向后不兼容的更新。
次版本号（Minor）：当进行向下兼容的功能性新增时增加，表示向后兼容的更新。
修订号（Patch）：当进行向下兼容的问题修复时增加，表示向后兼容的更新。

现在我们只用把修订号加一即可

运行pnpm changeset version 命令：

刚开始是选择是否是Major更新，这里什么都不选，直接按回车跳过。接下来是Minor，我们也跳过。最后默认的就是Patch版本号加1。版本号确定后，需要我们填写更新内容：

填写完成后会看到在子包下生成了CHANGELOG.md文件，里面记录了选择的版本号和输入的更新内容

发布包

提交代码后，运行pnpm publish -r，没有问题的哈，终端会输出发布信息。去私有库网页查看的话，包应该已经发上去了。

总结

本篇文章介绍了如何搭建私有库，版本规则，changeset的使用方法。

在接下来的文章中，会介绍一些封装element-plus的技巧。

那么下次再见咯，鸽鸽。