學會使用輪子之後來學造輪子 — 發佈自己的 npm module

npm 對於 JavaScript 開發者來說無庸置疑是非常重要的工具（或者可以說是平台），它幫你管理專案使用到的 dependencies，讓我們可以輕鬆下載別人開發好的第三方套件。使用第三方套件久了總會好奇自己是否也能夠打造第三方套件讓其他人使用？透過這篇文章簡單記錄一下打造自己 npm 套件的步驟，讓自己的金魚腦忘記流程時能夠回來複習，也期望讓看過這篇文章的人能夠有所收穫。

首先建立一個空的專案資料夾，接著 cd 進入該資料夾，創建 npm 專案。透過 command line 指令可以寫成以下這樣：

mkdir medium-npm
cd medium-npm
npm init

接著 npm 會問你許多問題，這邊可以先按 enter 跳過，因為之後我們還可以再做更改，都跳過以後會生成 package.json 檔案。

package.json 內容如下:

{
"name": "medium-npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

平常我們可能不會太在意這個檔案的內容，頂多拿來看看專案使用了哪些套件與定義一些 command line script，然而當要發佈 npm module 時，這個檔案就相當重要了，這邊迅速帶過一下各個 key 代表的意義：

• name : npm module 的名字，發佈後要安裝就是要輸入這個名字
• version : npm module 的版本，預設從 1.0.0 開始，當要更新 module 時也需要更新版本號
• description : npm module 的簡短描述
• main : 主程式，npm 指定的加載文件，require(‘moduleName’) 就是加載這裡設定的檔案。
• script : 這邊不另外說明，大家應該相當熟悉 script 的用法。
• author : npm module 的作者
• license : 讓使用者知道自己對於這個 module 有怎樣的權限

簡單編輯一下 package.json 文檔：

{
"name": "medium-npm",
"version": "1.0.0",
"description": "Kyle Mo's medium tutorial(for test)",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Kyle Mo",
"license": "MIT"
}

接著就來建立 main 中的 index.js:

module.exports = (name = 'Kyle Mo') => {
    return `Hello ${name}, this is my first npm module`;
}

這邊用 ES6 語法寫一個簡單的示範函式

到這裡就已經完成 publish 的最低限度前置作業了，接著就來 publish 它吧（雖然是一個很沒用的函式）

首先要先成為 npm 會員

npm 官網

至 npm 官網註冊會員後，在專案資料夾輸入：

npm login

輸入帳號密碼登入成功後，接著輸入

npm publish

順利的話就會發佈成功囉！

成功發佈 module 到 nom

既然已經 publish 成功了，使用方法也就跟其他第三方套件一樣囉，可以開一個新的專案來試試看，在新專案中下以下指令：

npm install medium-npm

也就可以在專案中引用該套件囉！

import greeting from 'medium-npm';
console.log(greeting('Harry'))

其他注意事項

文件 document

通常 npm module 都會有文件提供給使用者參考

我們可以透過建立 readme.md 來提供文件 ，npm 會自己去抓該檔案

測試 test

在 publish 前先經過測試是一個好習慣，可以透過在 package.json 中加入以下 script

"test": "some command to run your test",
"prepublish": "npm test"

如此一來在執行 npm publish 時就會自動跑測試了，當然測試沒過 npm 也會擋掉讓 publish fail 。

如何發布新版本

還記得 version 的初始值是 1.0.0 嗎？

通常版本會用3個數字來定義 ，1.5.7 像是這樣3個數字，最前面的 1 代表主版號， 5代表次版號， 7 代表修訂號。

如果今天你改動了程式碼，新增了新功能，會把 1.0.0 改為 1.1.0，而如果這時有使用者回報 module 的 bug ，修復後則會將版本改為 1.1.1。

當要發布新版本時，只要在 package.json 的 version 填入新的版本號，再重跑 npm publish 就可以了。

以上就是簡易的 npm module 發佈筆記，希望除了幫助自己記憶以外也能幫助其他看過文章的人。