本篇文章为《前端组件库的开发与维护》系列的第九篇文章。本文案例在线文档：calendar.hxkj.vip。GitHub 仓库：github.com/TangSY/vue3…。

前言

当你看到这里的时候，就意味着整个系列将随着本篇文章的完结而完结。有小伙伴是从第一篇开始就一直追更到现在的吗？👀

今天要讲的内容如果掌握了自动推送 npm 背后的原理，其实很简单，只需要对上一篇文章中的 Execute Commands 稍微改改就可以了，那咱们就来实操一下。

原理 & 配置

先来回顾一下，咱们正常的往 npm 发布组件包的时候是怎么样做的。

1. 执行 npm login
2. 输入用户名
3. 输入密码
4. 输入邮箱
5. npm publish

嗯，这一整套流程其实一点问题都没有，那可不可以直接把这套命令写到 Execute Commands 里面去呢？

答案是：不行。

这里有两个主要原因：

1. 由于输入用户名、密码、邮箱这三个操作是在终端交互式输入完成的，然而 CI/CD 流程中并不支持这种交互式输入
2. 假设它已经支持了这种方式，但是配置文件是公开的，如果直接将密码写在配置文件中，那你的 npm 账号密码就相当于公之于众了，那肯定也是不行的。

接下来咱们一一解决这两个问题。

1、通过 _authToken 登录 npm

除了可以采用账号密码直接登录 npm 之外，它同时也支持通过读取项目根目录中的 _authToken 配置来登录

第一步，使用 npm 命令创建 token

npm token create

第二步，在项目根目录中创建 .npmrc 文件，文件内容如下

//registry.npmjs.org/:_authToken=刚刚获取到的token
registry=https://registry.npmjs.org/
home=https://www.npmjs.org

大家可以尝试本地退出 npm 账号之后，直接执行 npm publish，可以发现依然能正常的发布 npm 包。

OK，这个问题解决了，同时也出现了上面所说的第二个问题：npm token 被暴露了，下面咱们把这个问题也解决一下。

2、配置 _authToken 变量

这一步就是将咱们的 _authToken 配置为 OneDev 变量，然后在配置文件中通过变量来引用 token，这样就达到了既不公开 token，又可以登录账号的效果。

好了，接下来演示一下如何添加 _authToken 变量。

打开咱们前面部署的 OneDev，进入对应的项目，然后依次选择 "Settings" -> "Build" -> "Job Secrets"

点击添加按钮，填写对应信息

添加完成之后，就可以进入 CI/CD 配置流程了。

3、修改 .onedev-buildspec.yml 配置

第一步，编辑配置文件

第二步，修改上一篇文章中配置的名为 build 的 Steps

第三步，加入发布命令

好了，所有的配置都已完成。

后续只需要修改 master 分支的代码并提交，就可以触发自动构建、自动部署、自动发布 npm 包了！！！

4、小优化

细心的小伙伴可能发现了，如果真的要发布 NPM 包，除了上面这些步骤，还有个步骤得手动操作，那就是升级 package.json 文件里面的版本号。

这个步骤说麻烦也不麻烦，但是所有东西都自动化了，搁这里还有个手动操作的步骤，总觉得有点别扭。秉着能自动化则绝不手动操作的原则，有没有什么办法可以让他也自动升级呢？嘿嘿，还真有。

接下来简单的介绍一下 npm version 这个命令。

npm version 是一个用于管理 Node.js 应用版本的命令行工具。该工具可用于更新 package.json 文件中的版本号以及将这个版本号提交到源代码控制系统中。

npm version 命令有以下几个参数：

1. major：当你的应用做了不兼容的改动时，使用这个参数来升级主版本号。
2. minor：当你的应用增加了新功能时，使用这个参数来升级次版本号。
3. patch：当你的应用进行了 bug 修复时，使用这个参数来升级补丁版本号。
4. premajor：当你的应用处于一个开发阶段，但是你已经做了一些不兼容的改动时，使用这个参数来升级主版本号，并且为预发行版本打上标记。
5. preminor：当你的应用处于一个开发阶段，但是你已经增加了新功能时，使用这个参数来升级次版本号，并且为预发行版本打上标记。
6. prepatch：当你的应用处于一个开发阶段，但是你已经进行了 bug 修复时，使用这个参数来升级补丁版本号，并且为预发行版本打上标记。
7. prerelease：当你的应用处于一个开发阶段，并且你希望发布一个预发行版本时，使用这个参数来为当前版本号打上标记。

除了以上列出的参数之外，npm version 还有一些其他参数，例如 -m 可以指定提交的版本号更新消息，--no-git-tag-version 可以在更新版本号时不创建 git 标签等等。

从上面的应用场景可以知道，我们在组件库的维护当中，最常用的就是 major、minor、patch 这三个参数了。其中又以 patch 的频率最高。所以，咱们就直接把这个参数作为 CI/CD 流程中的版本号升级命令即可。

接下来参考前面第 3 个步骤来修改 .onedev-buildspec.yml 配置，把 npm version patch 命令加入如下位置：

保存即可立即生效。

总结

今天这篇文章主要讲解了如何利用 OneDev 进行自动发布 NPM 包，在这过程中遇到了两个问题，所幸找到了解决问题的方案，成功达成实现自动发布 NPM 包的目标。

文章最后还介绍了一个小优化——自动升级版本号。

OK，现在隆重的宣布：“《组件库从开发到维护全链路讲解》系列已完美收官！”

对此系列感兴趣的，不妨一键三连（点赞 + 关注 + 收藏），方便作者产出更多更精彩的文章。

本系列往期文章

• 组件库从开发到维护全链路讲解（一）基础框架的搭建

• 组件库从开发到维护全链路讲解（二）日历组件的核心逻辑与设计

• 组件库从开发到维护全链路讲解（三）小型组件换肤的最佳实践

• 组件库从开发到维护全链路讲解（四）覆盖单元测试的最佳实践

• 组件库从开发到维护全链路讲解（五）如何优雅的提交代码——规范化

• 组件库从开发到维护全链路讲解（六）自动且高效的生成changelog

• 组件库从开发到维护全链路讲解（七）搭建美观且实用的文档站点｜细节满满

• 组件库从开发到维护全链路讲解（八）在线文档自动部署｜图文并茂