大家好，我是 Chocolate。

上周因?yàn)樘Γ?b 站就只發(fā)了一個(gè)視頻，本篇內(nèi)容是對(duì)視頻的部分補(bǔ)充，文章后半部分是視頻中所需要的文檔。結(jié)合視頻觀看會(huì)更好。

視頻大家可以在文章末尾，點(diǎn)擊「閱讀原文」即可跳轉(zhuǎn)到對(duì)應(yīng) b 站視頻，不妨提前關(guān)注一下這個(gè)持續(xù)學(xué)習(xí)的 UP！

(資料圖片僅供參考)

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

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

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

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

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

其實(shí)初心還是鍛煉自己的編程能力，學(xué)習(xí)優(yōu)秀的開源項(xiàng)目，就比如這個(gè) react hook 吧，能把最近學(xué)習(xí)掌握的 ts 進(jìn)行落地實(shí)踐也還算不錯(cuò)。

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

dumi 初識(shí)

其實(shí)我之前一直想著要用 monorepo 的方式來做，但因?yàn)樽约耗壳爸髁魇褂?React，又看到 dumi 2.0 發(fā)布了，于是乎拿來實(shí)戰(zhàn)了。

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

前期準(zhǔn)備

一個(gè) npm 賬號(hào)，如果沒有的話需要自行注冊(cè)¹。

dumi 基礎(chǔ)，可以觀看 bilibili 視頻²快速學(xué)習(xí)文檔。

使用 dumi

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

npxcreate-dumi

發(fā)布前注意事項(xiàng)

第一，npm 源需要使用 npmjs

npmconfigsetregistryhttps://registry.npmjs.org

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

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

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

版本號(hào)規(guī)范

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

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

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

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

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

1.0.0-alpha1.0.0-alpha.11.0.0-0.2.5

常見的先行版本號(hào)有：

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

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

rc：和正式版基本相同，基本上不存在導(dǎo)致錯(cuò)誤的 Bug

release：最終版本

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

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

以下主要介紹常用的幾個(gè)命令

npmversionmajor（3.1.0 --> 4.0.0）

npmversionminor（2.0.1 --> 2.1.0）

npmversionpatch（2.0.0 --> 2.0.1）

至于 prexxx 開頭的，以及 release 相關(guān)可以查詢下述文檔拓展學(xué)習(xí)。

文檔指引：npm version⁶

補(bǔ)充相關(guān)命令

//登錄自己的npm賬號(hào)npmlogin//退出當(dāng)前賬號(hào)npmlogout//查看當(dāng)前身份npmwhoami//發(fā)布npmpublish//撤銷發(fā)布某個(gè)版本npmunpublish[pkg]@[version]

解決遇到的問題

403 問題

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

一般是兩種情況：

郵箱不對(duì)

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

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

參考資料[1]

注冊(cè):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

關(guān)鍵詞： 從零開始 向下兼容 一般而言