發佈 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 中對於該套件所寫的說明：

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

1. 因為前面文章一開始建立專案時就是建立 scoped 的套件，所以第一個是你會發現這個專案是以 @ 的開頭
2. 預設的情況下，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 上並不困難，但是如果每次套件版本一有更新，我們就必須要執行這些事情：

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

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

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

參考文章

• npm-publish @ npmjs doc
• Creating and publishing scoped public packages @ npmjs docs