[Guide] 發佈 npm 套件 - 從手動到自動(2):手動 publish 篇
keywords: deploy
, publish
, release
, CLI
, npm
, package.json
在前一篇文章中,我們已經完成了基本的 package.json
設定,現在就來試著發佈上 npm 吧!如果你還沒完成前一篇的專案內容,可以到 Github 這裡下載。
在邁入自動化發佈 npm 套件之前,我們仍然需要先了解如果要手動發布的話該如何執行,畢竟自動化的工具也就是幫我們把一連串的指令自動化執行。
⚠️ 撰寫文章時使用的 npm 版本為 6.13.7。
透過 npm publish 手動發佈套件
其實要把套件手動發佈到 npm 上並不難,只需要透過 npm publish
這個指令就可以了。但在那之前,如果你還沒申請帳號的話,需要先到 npmjs 上註冊一個帳號。
註冊完之後,讓我們來試試看,打開終端機進入到專案的根目錄:
# 如果尚未登入 npm,需要輸入 npm 的帳號密碼
$ npm login
接著在專案目錄內輸入 npm publish
:
$ npm publish
這時候就發佈到 npm 上面啦!是不是非 常簡單呢!?
你可以到 npmjs 點選右上角的頭像,點選 Packages 後,應該就可以看到剛剛發佈的套件已經列在裡面了:
點進去之後就可以看到當初在 package.json
中各欄位所設定的資料,以及 README 中對於該套件所寫的說明:
這裡有兩個需要留意的地方:
- 因為前面文章一開始建立專案時就是建立 scoped 的套件,所以第一個是你會發現這個專案是以
@
的開頭 - 預設的情況下,scoped 的套件在 publish 時會是隱私的,但因為我們使用的是免費帳號,並沒有提供隱私套件的額度,因此預設就會是公開的,可以留意一下套件名稱下方有顯示 Public:
如果因為免費帳戶在發布 scoped package 時有些問題,只需要在 npm publish
後面加上 --access public
指定說這個套件是公開的即可:
$ npm publish --access public
下載套件來使用
既然已經發佈到 npm 上,就表示其他使用者可以下載來使用了,來試試看吧!
先建立一個資料夾:
$ mkdir function-benchmarker-sandbox # 建立一個測試用資料 夾
$ cd function-benchmarker-sandbox # 進入該資料夾
接著初始化 npm 後,把剛剛 publish 上去的套件 install 下來
$ npm init -y # 初始化 npm
$ npm install @pjchender/function-benchmarker # 下載剛剛 publish 上去的套件
這時候打開專案可以看到我們的套件已經被放到 node_modules
資料夾中了,點開來看會發現只有打包好的 dist
資料夾,而沒有未打包過原始碼(src
資料夾),還記得這是因為我們在前一篇文章中透過在 package.json
中設定 files
欄位達到的嗎?
接著就在根目錄建立一支 index.js
來試著載入我們的套件,看看能不能正常運作:
// index.js
// 匯入套件
const benchmarker = require('@pjchender/function-benchmarker');
// 定義一個想要檢驗花費時間的函式
function jsonStringify() {
JSON.stringify({
foo: 'bar',
});
}
// 執行 benchMarker 這個方法,並把想檢驗的函式放進去
const costTime = benchmarker(jsonStringify);
console.log('costTime', costTime);
接著用 node index.js
來執行這支 JavaScript 檔:
可以看到的確可以成功使用 @pjchender/function-benchmarker
這個套件了。
往自動化邁進
你會發現要把套件發佈到 npm 上並不困難,但是如果每次套件版本一有更新,我們就必須 要執行這些事情:
- 執行測試
- 修改套件版本號
- 修改 CHANGELOG 檔案
- 打包套件
- 發佈到 Github
- 發佈到 npm
這些流程雖然都可以手動一一執行,但卻有些瑣碎,透過自動化的工具搭配持續整合(CI)就可以幫助我們省下這些瑣碎的流程。
在下一篇文章中,就讓我們開始從手動往自動化邁進吧!
參考文章
- npm-publish @ npmjs doc
- Creating and publishing scoped public packages @ npmjs docs