我的一次 dumi 实战！

大家好，我是 Chocolate。

上周因为太忙，在 b 站就只发了一个视频，本篇内容是对视频的部分补充，文章后半部分是视频中所需要的文档。结合视频观看会更好。

视频大家可以在文章末尾，点击「阅读原文」即可跳转到对应 b 站视频，不妨提前关注一下这个持续学习的 UP！

这个视频来介绍如何基于 dumi 2.0 发布属于自己的 npm 包，还能共享给别人使用，也算是造轮子必备技能了。

还记得之前在星球发过自己要做一个 react hooks 的项目，没错，已经开始做了。

开源界有很多优秀的 hook 库，比如 ahooks，vueuse，react-use 等等，我的暂时性目标主要还是边看他们所做的，然后跟着去模仿自己写一个项目出来，当然，像这些优秀的开源库，你会发现，你没办法不安装包直接复制到你的文件夹中。

因此，我打算做一个开箱即用的 react hooks 库，通过文档的复制粘贴功能，不用 install 我的库，你同样也可以使用 custom hook。

我也知道一个优秀的开源库一定是许多人一起参与开发共建的，也希望能在做一些开源项目的时候接触一些大佬吧哈哈。

其实初心还是锻炼自己的编程能力，学习优秀的开源项目，就比如这个 react hook 吧，能把最近学习掌握的 ts 进行落地实践也还算不错。

关键还是在于做吧，我相信会有人来参与进来的。文章内容又多了一个方向。

dumi 初识

其实我之前一直想着要用 monorepo 的方式来做，但因为自己目前主流使用 React，又看到 dumi 2.0 发布了，于是乎拿来实战了。

做组件发布这一块，不得不说 dumi 还是真的方便，写好文档，组件也就可以准备发布了。那么，以下就是关于如何去发布 npm 包的基础内容了，完整的发布大家可以参考视频内容，如果跳过的话，其实仅需 3 分钟左右，你就能学会如何发布属于个人的 npm 包了。

前期准备

• 一个 npm 账号，如果没有的话需要自行注册¹。

• dumi 基础，可以观看 bilibili 视频² 快速学习文档。

使用 dumi

通过脚手架安装，根据提示选择对应的模版，由于我们要发布 npm 包，所以选择 React Library。

npx create-dumi

发布前注意事项

第一，npm 源需要使用 npmjs

npm config set registry https://registry.npmjs.org

第二，需要执行 npm login，填写用户名，邮箱等。

第三，package.json 里边 name 需要用小写，不能用大写

第四，确保 package.json 里边的 name 和目前 npmjs³ 网站已发布的不冲突。

版本号规范

npm 包的版本通常遵循 semver 语义化版本⁴规范。

版本格式为：major.minor.patch，每个字母代表的含义如下：

主版本号（major）：当你做了不兼容的 API 修改，
次版本号（minor）：当你做了向下兼容的功能性新增，
修订号（patch）：当你做了向下兼容的问题修正。

先行版本号是加到修订号的后面，作为版本号的延伸；当要发行大版本或核心功能时，但不能保证这个版本完全正常，就要先发一个先行版本。

先行版本号的格式是在修订版本号后面加上一个连接号（-），再加上一连串以点（.）分割的标识符，标识符可以由英文、数字和连接号（[0-9A-Za-z-]）组成。举个例子：

1.0.0-alpha
1.0.0-alpha.1
1.0.0-0.2.5

常见的先行版本号有：

• alpha：不稳定版本，一般而言，该版本的 Bug 较多，需要继续修改，是测试版本

• beta：基本稳定，相对于 Alpha 版已经有了很大的进步，消除了严重错误

• rc：和正式版基本相同，基本上不存在导致错误的 Bug

• release：最终版本

此处参考：从零开始发布自己的 NPM 包⁵

当然，我们最好是使用命令来规范我们的版本，举例：

以下主要介绍常用的几个命令

• npm version major （3.1.0 --> 4.0.0）

• npm version minor（2.0.1 --> 2.1.0）

• npm version patch（2.0.0 --> 2.0.1）

至于 prexxx 开头的，以及 release 相关可以查询下述文档拓展学习。

文档指引：npm version⁶

补充相关命令

// 登录自己的 npm 账号
npm login

// 退出当前账号
npm logout

// 查看当前身份
npm who am i

// 发布
npm publish

// 撤销发布某个版本
npm unpublish [pkg]@[version]

解决遇到的问题

403 问题

npm ERR! code E403
npm ERR! 403 403 Forbidden — PUT https://registry.npmjs.org/xxx — You do not have permission to publish xxx. Are you logged in as the correct user?
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.

一般是两种情况：

• 邮箱不对

• package.json 里边的 name 和目前 npmjs³ 网站已发布的冲突了

参考 Solve the error when npm publish for the first time.⁷