跳至主要内容

[Guide] 發佈 npm 套件 - 從手動到自動(2):手動 publish 篇

keywords: deploy, publish, release, CLI, npm, package.json

Imgur

前一篇文章中,我們已經完成了基本的 package.json 設定,現在就來試著發佈上 npm 吧!如果你還沒完成前一篇的專案內容,可以到 Github 這裡下載。

在邁入自動化發佈 npm 套件之前,我們仍然需要先了解如果要手動發布的話該如何執行,畢竟自動化的工具也就是幫我們把一連串的指令自動化執行。

⚠️ 撰寫文章時使用的 npm 版本為 6.13.7。

透過 npm publish 手動發佈套件

其實要把套件手動發佈到 npm 上並不難,只需要透過 npm publish 這個指令就可以了。但在那之前,如果你還沒申請帳號的話,需要先到 npmjs 上註冊一個帳號。

註冊完之後,讓我們來試試看,打開終端機進入到專案的根目錄:

# 如果尚未登入 npm,需要輸入 npm 的帳號密碼
$ npm login

img

接著在專案目錄內輸入 npm publish:

$ npm publish

img

這時候就發佈到 npm 上面啦!是不是非常簡單呢!?

你可以到 npmjs 點選右上角的頭像,點選 Packages 後,應該就可以看到剛剛發佈的套件已經列在裡面了:

img

點進去之後就可以看到當初在 package.json 中各欄位所設定的資料,以及 README 中對於該套件所寫的說明:

img

這裡有兩個需要留意的地方:

  1. 因為前面文章一開始建立專案時就是建立 scoped 的套件,所以第一個是你會發現這個專案是以 @ 的開頭
  2. 預設的情況下,scoped 的套件在 publish 時會是隱私的,但因為我們使用的是免費帳號,並沒有提供隱私套件的額度,因此預設就會是公開的,可以留意一下套件名稱下方有顯示 Public

img

如果因為免費帳戶在發布 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 欄位達到的嗎?

img

接著就在根目錄建立一支 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 檔:

img

可以看到的確可以成功使用 @pjchender/function-benchmarker 這個套件了。

往自動化邁進

你會發現要把套件發佈到 npm 上並不困難,但是如果每次套件版本一有更新,我們就必須要執行這些事情:

  1. 執行測試
  2. 修改套件版本號
  3. 修改 CHANGELOG 檔案
  4. 打包套件
  5. 發佈到 Github
  6. 發佈到 npm

這些流程雖然都可以手動一一執行,但卻有些瑣碎,透過自動化的工具搭配持續整合(CI)就可以幫助我們省下這些瑣碎的流程。

在下一篇文章中,就讓我們開始從手動往自動化邁進吧!

參考文章