[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