我的一次 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 包，所以选择 ReactLibrary。

npxcreate-dumi

发布前注意事项

第一，npm 源需要使用 npmjs

npmconfigsetregistryhttps://registry.npmjs.org

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

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

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

版本号规范

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

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

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

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

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

1.0.0-alpha1.0.0-alpha.11.0.0-0.2.5

常见的先行版本号有：

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

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

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

release：最终版本

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

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

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

npmversionmajor（3.1.0 --> 4.0.0）

npmversionminor（2.0.1 --> 2.1.0）

npmversionpatch（2.0.0 --> 2.0.1）

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

文档指引：npm version⁶

补充相关命令

//登录自己的npm账号npmlogin//退出当前账号npmlogout//查看当前身份npmwhoami//发布npmpublish//撤销发布某个版本npmunpublish[pkg]@[version]

解决遇到的问题

403 问题

npmERR!codeE403npmERR!403403Forbidden—PUThttps://registry.npmjs.org/xxx—Youdonothavepermissiontopublishxxx.Areyouloggedinasthecorrectuser?npmERR!403Inmostcases,youoroneofyourdependenciesarerequestingnpmERR!403apackageversionthatisforbiddenbyyoursecuritypolicy.

一般是两种情况：

邮箱不对

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

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

参考资料[1]

注册:https://www.npmjs.com/signup

[2]

bilibili 视频:https://www.bilibili.com/video/BV1KG4y1Z7ZX/

[3]

npmjs:https://www.npmjs.com/

[4]

semver 语义化版本:https://semver.org/lang/zh-CN/

[5]

此处参考：从零开始发布自己的 NPM 包:https://juejin.cn/post/7052307032971411463

[6]

文档指引：npm version:https://www.npmjs.cn/cli/version/

[7]

npmjs:https://www.npmjs.com/

[8]

Solve the error when npm publish for the first time.:https://medium.com/@su_bak/solve-the-error-when-npm-publish-for-the-first-time-a4cca150f379

关键词： 从零开始 向下兼容 一般而言