国产精品夜色视频一级区_hh99m福利毛片_国产一区二区成人久久免费影院_伊人久久大香线蕉综合影院75_国产精品久久果冻传媒

您的位置:首頁 >聚焦 >

我的一次 dumi 實(shí)戰(zhàn)!-焦點(diǎn)速訊

2022-12-03 09:35:23    來源:程序員客棧

大家好,我是 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è)1

dumi 基礎(chǔ),可以觀看 bilibili 視頻2快速學(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和目前 npmjs3網(wǎng)站已發(fā)布的不沖突。

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

npm 包的版本通常遵循 semver 語義化版本4規(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 包5

當(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 version6

補(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和目前 npmjs3網(wǎng)站已發(fā)布的沖突了

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

參考資料[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)鍵詞: 從零開始 向下兼容 一般而言

相關(guān)閱讀