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

一.代碼準備

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

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

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

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

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

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

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

二.賬號注冊

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

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

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

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

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

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

三.npm包發布

3.1 登錄npm賬號

3.1.1 登錄失敗

執行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 如何發布npm包

3.2.1 首次發布成功

登錄成功之后即可執行發布命令：npm publish，如下圖：

此時npm包發布成功了。

3.2.2 名字相似發布失敗

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

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

3.3 如何刪除npm 包

3.3.1 廢棄npm 包

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

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

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

廢棄之后是否可以發布成功呢？重新執行npm publish

執行結果如下圖：

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

3.3.2 刪除npm包

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

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

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

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

3.4 如何使用npm包

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

可以查看package.json文件，返現已經將mx-dev-util加添為dependiences:

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

3.5 更新npm包版本

更新npm包兩步走：

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

3.5.1 npm version介紹

npm version命令使用方式如下：

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

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

如果當前版本為 0.0.1 則發布major、minor，patch版本之后會變為 1.0.0 ，0.1.0， 0.0.2。導圖總結如下：

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

了解了npm version命令之后，執行npm version major :

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

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

3.5.2 改版后發布

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

可以看到版本更新成功。

下面總結一下用到發布npm包用到的npm命令

4.總結

（1）本文介紹發布一個npm包的三個關鍵環節：

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

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

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