如何在發布自己的 NPM package 之前打包檔案

最近 Bower 宣布停止維護,所以許多前端的 packages 都移到了 NPM 上,甚至連 GruntGulp 這類 build tools 都有要被 NPM scripts 取代的趨勢。
這篇文章主要是紀錄怎麼在發布自己的 package 之前,打包好需要的檔案。
假設你會使用 GruntGulp 將所有原始碼打包存成一支檔案,例如 dist/build.js,但是因為通常我們不會把 dist 這類輸出文件放進版本控制,所以要在每次發布新版本的時候動態打包。
方法是在 package.jsonscript 底下新增一個 prepublish 的腳本,然後把你的打包命令寫在這裡:
// package.json

{
  "script": {
    "prepublish": "..." // grunt or gulp
  }
}
接下來是透過 main 指定程式的進入位置,讓其他人在使用的時候可以正常的 requireimport 你的 package。
預設的檔案通常是 index.js,這裡我們把它改成剛剛打包完成的 dist/buid.js
// package.json

{
  "main": "dist/build.js"
}
最後也是最重要的部分,記得在專案根目錄新增一份 .npmignore 的空檔案,因為如果沒有它,NPM 在發布的時候會參考 .gitignore 的清單來決定哪些檔案不能被發布,而通常 dist 就會在這裡面,所以要將它從 .npmignore 裡面移除。
都準備完成之後就可以發布了,如果你還沒有 NPM 的帳號,可以註冊一個:
npm adduser
然後發布新版本:
npm publish
記得更新 package.jsonversion 才能發布
發布成功之後前往 http://npmjs.com/package/name 看結果:

完整專案可以參考我的 GitHub

參考文章

Buy Me a Coffee

這個網誌中的熱門文章

DevOps:持續整合&持續交付(Docker、CircleCI、AWS)

Factory pattern 工廠模式

Mock Server&契約測試