圖文結合簡單易學的 npm 包的發佈流程

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

1. 代碼準備

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

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

"publishConfig": {
  "access": "public"
},
複製代碼

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

2. 賬號註冊

先看下圖瞭解註冊的流程：

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

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

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

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

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

3.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 包兩步走：

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 包的三個關鍵環節：

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

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

關於本文

作者：NewName

https://juejin.cn/post/7125709933709885448

歡迎關注【前端瓶子君】✿✿ヽ (°▽°) ノ✿

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/8epfgYN2bRnuPgCFI-0rfA

猜你喜歡