大家好，我是 Chocolate。

上周因為太忙，在 b 站就只發(fā)了一個視頻，本篇內(nèi)容是對視頻的部分補充，文章后半部分是視頻中所需要的文檔。結合視頻觀看會更好。

視頻大家可以在文章末尾，點擊「閱讀原文」即可跳轉(zhuǎn)到對應 b 站視頻，不妨提前關注一下這個持續(xù)學習的 UP！

(資料圖片僅供參考)

這個視頻來介紹如何基于 dumi 2.0 發(fā)布屬于自己的 npm 包，還能共享給別人使用，也算是造輪子必備技能了。

還記得之前在星球發(fā)過自己要做一個 react hooks 的項目，沒錯，已經(jīng)開始做了。

開源界有很多優(yōu)秀的 hook 庫，比如 ahooks，vueuse，react-use 等等，我的暫時性目標主要還是邊看他們所做的，然后跟著去模仿自己寫一個項目出來，當然，像這些優(yōu)秀的開源庫，你會發(fā)現(xiàn)，你沒辦法不安裝包直接復制到你的文件夾中。

因此，我打算做一個開箱即用的 react hooks 庫，通過文檔的復制粘貼功能，不用 install 我的庫，你同樣也可以使用 custom hook。

我也知道一個優(yōu)秀的開源庫一定是許多人一起參與開發(fā)共建的，也希望能在做一些開源項目的時候接觸一些大佬吧哈哈。

其實初心還是鍛煉自己的編程能力，學習優(yōu)秀的開源項目，就比如這個 react hook 吧，能把最近學習掌握的 ts 進行落地實踐也還算不錯。

關鍵還是在于做吧，我相信會有人來參與進來的。文章內(nèi)容又多了一個方向。

dumi 初識

其實我之前一直想著要用 monorepo 的方式來做，但因為自己目前主流使用 React，又看到 dumi 2.0 發(fā)布了，于是乎拿來實戰(zhàn)了。

做組件發(fā)布這一塊，不得不說 dumi 還是真的方便，寫好文檔，組件也就可以準備發(fā)布了。那么，以下就是關于如何去發(fā)布 npm 包的基礎內(nèi)容了，完整的發(fā)布大家可以參考視頻內(nèi)容，如果跳過的話，其實僅需 3 分鐘左右，你就能學會如何發(fā)布屬于個人的 npm 包了。

前期準備

一個 npm 賬號，如果沒有的話需要自行注冊¹。

dumi 基礎，可以觀看 bilibili 視頻²快速學習文檔。

使用 dumi

通過腳手架安裝，根據(jù)提示選擇對應的模版，由于我們要發(fā)布 npm 包，所以選擇 ReactLibrary。

npxcreate-dumi

發(fā)布前注意事項

第一，npm 源需要使用 npmjs

npmconfigsetregistryhttps://registry.npmjs.org

第二，需要執(zhí)行 npmlogin，填寫用戶名，郵箱等。

第三，package.json 里邊 name需要用小寫，不能用大寫

第四，確保 package.json 里邊的 name和目前 npmjs³網(wǎng)站已發(fā)布的不沖突。

版本號規(guī)范

npm 包的版本通常遵循 semver 語義化版本⁴規(guī)范。

版本格式為：major.minor.patch，每個字母代表的含義如下：

主版本號（major）：當你做了不兼容的 API 修改，次版本號（minor）：當你做了向下兼容的功能性新增，修訂號（patch）：當你做了向下兼容的問題修正。

先行版本號是加到修訂號的后面，作為版本號的延伸；當要發(fā)行大版本或核心功能時，但不能保證這個版本完全正常，就要先發(fā)一個先行版本。

先行版本號的格式是在修訂版本號后面加上一個連接號（-），再加上一連串以點（.）分割的標識符，標識符可以由英文、數(shù)字和連接號（[0-9A-Za-z-]）組成。舉個例子：

1.0.0-alpha1.0.0-alpha.11.0.0-0.2.5

常見的先行版本號有：

alpha：不穩(wěn)定版本，一般而言，該版本的 Bug 較多，需要繼續(xù)修改，是測試版本

beta：基本穩(wěn)定，相對于 Alpha 版已經(jīng)有了很大的進步，消除了嚴重錯誤

rc：和正式版基本相同，基本上不存在導致錯誤的 Bug

release：最終版本

此處參考：從零開始發(fā)布自己的 NPM 包⁵

當然，我們最好是使用命令來規(guī)范我們的版本，舉例：

以下主要介紹常用的幾個命令

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//發(fā)布npmpublish//撤銷發(fā)布某個版本npmunpublish[pkg]@[version]

解決遇到的問題

403 問題

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

一般是兩種情況：

郵箱不對

package.json 里邊的 name和目前 npmjs³網(wǎng)站已發(fā)布的沖突了

參考 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]

此處參考：從零開始發(fā)布自己的 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

關鍵詞： 從零開始 向下兼容 一般而言