聰明的你做了幾個(gè)項(xiàng)目之后，有沒(méi)有發(fā)現(xiàn)發(fā)現(xiàn)某些工具方法或者組件的使用頻率很高，好多項(xiàng)目都在用。如何做到這些工具方法或者組件的更優(yōu)雅地復(fù)用而不是用到了就復(fù)制粘貼呢？封裝為一個(gè)npm包是一個(gè)不錯(cuò)的選擇。本文以圖文結(jié)合的方式介紹了如何從0到1發(fā)布一個(gè)npm包，文中的一些關(guān)鍵點(diǎn)的說(shuō)明將幫你避坑提效。歡迎閱讀學(xué)習(xí)~

1.代碼準(zhǔn)備

每個(gè)人要發(fā)布的npm包類型都不盡相同，有UI組件庫(kù)，有工具函數(shù)庫(kù)，還有使用的插件等。筆者要發(fā)布的npm包是在項(xiàng)目中常用的工具函數(shù)組成的工具函數(shù)庫(kù)，構(gòu)建工具使用的是rollup，代碼托管在github上。下面簡(jiǎn)述一下一些關(guān)鍵點(diǎn)：

• 首先在github上新建倉(cāng)庫(kù)，新建倉(cāng)庫(kù)時(shí)License 選擇MIT, 此步驟不選擇也無(wú)妨，后續(xù)添加license也可以。但是一定要有License才能發(fā)布npm包。

• 拉取代碼到本地
• 初始化項(xiàng)目，安裝依賴等

• 完善功能
• 打包，并在package.json中指明入口

另外如果發(fā)布公有包需要在package.json中增加publishConfig的配置

"publishConfig": {
  "access": "public"
},
復(fù)制代碼

更多關(guān)于項(xiàng)目的搭建以及一些配置方面的內(nèi)容建議閱讀文末的參考資料。

2.賬號(hào)注冊(cè)

先看下圖了解注冊(cè)的流程：

網(wǎng)址：www.npmjs.com/signup^[2]

輸入網(wǎng)址后會(huì)進(jìn)行安全性檢查，之后界面如下：

點(diǎn)擊"我是人類" 會(huì)進(jìn)行圖片驗(yàn)證，如下圖：

圖片驗(yàn)證完就是輸入用戶名、密碼、郵箱過(guò)程，

最后讓輸入one-time-password，這個(gè)一次性密碼（相當(dāng)于驗(yàn)證碼）會(huì)發(fā)到你預(yù)留的郵箱里面。填寫之后應(yīng)該會(huì)注冊(cè)成功的。

3.npm包發(fā)布

3.1 登錄npm賬號(hào)

3.1.1 登錄失敗

執(zhí)行npm login 命令登錄npm ：

如上圖所示，登錄失敗了。解決辦法：使用nrm切換鏡像，將鏡像改為npm。下面簡(jiǎn)要介紹一下nrm。

3.1.2 nrm 介紹

nrm 用于管理鏡像，是一個(gè)可以切換npm鏡像的管理工具。如下是安裝和查看是否安裝成功的命令：

npm i -g nrm
nrm -V
復(fù)制代碼

常用nrm命令如下：

想了解更多關(guān)于nrm^[3]的內(nèi)容請(qǐng)查看文檔和資料^[4]。

下圖是使用nrm ls命令查看鏡像：

下圖是將鏡像切換為npm

3.1.3 成功登錄

切換鏡像之后再登錄：

如上圖登錄時(shí)需要輸入OTP，要查看郵箱。輸入OTP回車之后就可以成功登錄了

3.2 如何發(fā)布npm包

3.2.1 首次發(fā)布成功

登錄成功之后即可執(zhí)行發(fā)布命令：npm publish，如下圖：

此時(shí)npm包發(fā)布成功了。

3.2.2 名字相似發(fā)布失敗

但是感覺(jué)名字'mxdevutil'可讀性不咋好啊，所以改了一下名字，新名字為'mx-dev-util'重新發(fā)布，但卻報(bào)錯(cuò)，如下圖所示：

上圖報(bào)錯(cuò)信息告訴我們：新包的名字和已有的包名字很相似，所以沒(méi)有發(fā)布成功。解決的方法之一是可以起區(qū)分度較大的名字，但刪掉重新發(fā)布更好。

3.3 如何刪除npm 包

3.3.1 廢棄npm 包

查資料所如下命令可以刪掉發(fā)布錯(cuò)誤的npm包：

但實(shí)際上此命令是表示廢棄已發(fā)布的npm包，并不是刪除。

在npm網(wǎng)站上仍然能夠查到已廢棄的npm包，如下圖所示：

廢棄之后是否可以發(fā)布成功呢？重新執(zhí)行npm publish

執(zhí)行結(jié)果如下圖：

還是報(bào)錯(cuò)，所以單單廢棄原有包還是不能發(fā)布新包的。

3.3.2 刪除npm包

正確的解決辦法是：npm unpublish <報(bào)名> \-force ,命令執(zhí)行效果：

再在npm網(wǎng)站上查找則查不到了：

刪掉已發(fā)布的包之后，終于可以重新發(fā)布了：

發(fā)布成功！在npm網(wǎng)站上也能夠看到新包了：

3.4 如何使用npm包

首先安裝我們發(fā)布的npm包，執(zhí)行命令 npm i mx-dev-util, 如下圖：

可以查看package.json文件，返現(xiàn)已經(jīng)將mx-dev-util加添為dependiences:

接著就是在項(xiàng)目中使用npm包提供的方法了：

3.5 更新npm包版本

更新npm包兩步走：

• 第一步：執(zhí)行npm version <版本號(hào)類型>
• 第二步：執(zhí)行 npm publish

3.5.1 npm version介紹

npm version命令使用方式如下：

npm version  major | minor | patch | premajor | preminor | prepatch | prerelease
復(fù)制代碼

這里簡(jiǎn)單介紹一下major | minor | patch 的區(qū)別：在package.json中有一個(gè)version字段，結(jié)構(gòu)為 "x.y.z" ，也就是三位的版本號(hào)。分別對(duì)應(yīng) version里面的major、minor，patch。

如果當(dāng)前版本為 0.0.1 則發(fā)布major、minor，patch版本之后會(huì)變?yōu)?1.0.0 ，0.1.0， 0.0.2。導(dǎo)圖總結(jié)如下：

了解更多可查看npm version文檔和相關(guān)資料^[5]。

了解了npm version命令之后，執(zhí)行npm version major :

執(zhí)行命令失敗，提示需要先提交代碼，下圖為提交代碼過(guò)程：

提交代碼后，再執(zhí)行版本更新命令：

3.5.2 改版后發(fā)布

提示版本已經(jīng)更新為2.0.0版本，然后執(zhí)行 npm publish 命令：

可以看到版本更新成功。

下面總結(jié)一下用到發(fā)布npm包用到的npm命令

4.總結(jié)

（1）本文介紹發(fā)布一個(gè)npm包的三個(gè)關(guān)鍵環(huán)節(jié)：

• 發(fā)布內(nèi)容。也就是代碼，這是npm包的基礎(chǔ)
• 注冊(cè)npm賬號(hào)。這是能夠成功執(zhí)行npm 發(fā)布命令的前提
• npm包發(fā)布。掌握npm 包發(fā)布的這些命令是關(guān)鍵

（2）本文介紹了如何使用nrm 切換npm的鏡像

希望看完本文對(duì)您有幫助，表達(dá)不清楚或者寫錯(cuò)的地方歡迎不吝指正~

參考資料：

[1] npm包發(fā)布詳細(xì)教程^[6]

[2] 如何發(fā)布自己的npm包（超詳細(xì)步驟，博主都在用）^[7]

[3] 如何發(fā)布一個(gè)npm包^[8]

作者：NewName

https://juejin.cn/post/7125709933709885448