我的一次 dumi 實戰(zhàn)！

大家好，我是 Chocolate。

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

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

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

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

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

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

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

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

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

dumi 初識

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

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

前期準(zhǔn)備

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

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

使用 dumi

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

npx create-dumi

發(fā)布前注意事項

第一，npm 源需要使用 npmjs

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

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

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

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

版本號規(guī)范

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

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

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

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

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

1.0.0-alpha
1.0.0-alpha.1
1.0.0-0.2.5

常見的先行版本號有：

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

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

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

• release：最終版本

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

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

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

• 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 相關(guān)可以查詢下述文檔拓展學(xué)習(xí)。

文檔指引：npm version⁶

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

// 登錄自己的 npm 賬號
npm login

// 退出當(dāng)前賬號
npm logout

// 查看當(dāng)前身份
npm who am i

// 發(fā)布
npm publish

// 撤銷發(fā)布某個版本
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³ 網(wǎng)站已發(fā)布的沖突了

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