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

1.代碼準備

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

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

• 拉取代碼到本地
• 初始化項目，安裝依賴等

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

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

"publishConfig": {
  "access": "public"
},
復制代碼

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

2.賬號注冊

先看下圖了解注冊的流程：

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

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

點擊"我是人類" 會進行圖片驗證，如下圖：

圖片驗證完就是輸入用戶名、密碼、郵箱過程，

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

3.npm包發(fā)布

3.1 登錄npm賬號

3.1.1 登錄失敗

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

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

3.1.2 nrm 介紹

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

npm i -g nrm
nrm -V
復制代碼

常用nrm命令如下：

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

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

下圖是將鏡像切換為npm

3.1.3 成功登錄

切換鏡像之后再登錄：

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

3.2 如何發(fā)布npm包

3.2.1 首次發(fā)布成功

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

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

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

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

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

3.3 如何刪除npm 包

3.3.1 廢棄npm 包

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

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

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

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

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

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

3.3.2 刪除npm包

正確的解決辦法是：npm unpublish <報名> \-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:

接著就是在項目中使用npm包提供的方法了：

3.5 更新npm包版本

更新npm包兩步走：

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

3.5.1 npm version介紹

npm version命令使用方式如下：

npm version  major | minor | patch | premajor | preminor | prepatch | prerelease
復制代碼

這里簡單介紹一下major | minor | patch 的區(qū)別：在package.json中有一個version字段，結構為 "x.y.z" ，也就是三位的版本號。分別對應 version里面的major、minor，patch。

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

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

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

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

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

3.5.2 改版后發(fā)布

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

可以看到版本更新成功。

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

4.總結

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

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

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

希望看完本文對您有幫助，表達不清楚或者寫錯的地方歡迎不吝指正~

參考資料：

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

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

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

作者：NewName

https://juejin.cn/post/7125709933709885448