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

一.代碼準備

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

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

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

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

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

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

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

二.賬號注冊

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

網址：www.npmjs.com/signup[2]

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

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

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

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

三.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]的內容請查看文檔和資料[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網站上仍然能夠查到已廢棄的npm包，如下圖所示：

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

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

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

3.3.2 刪除npm包

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

再在npm網站上查找則查不到了：

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

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

3.4 如何使用npm包

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

可以查看package.json文件，返現已經將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ā)布

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

可以看到版本更新成功。

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

4.總結

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

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

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

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