應該是要先講打包，再來講怎麼發佈套件的，不過沒關係，最後一天來看看打包吧！

開始！

拿 rollup.js 來幫我們協助打包，先來安裝

npm install --global rollup

安裝好後就可以透過CLI下 rollup ...請打包 來打包程式碼 (欸?，若檔案比較多，改用 rollup -c 並搭配 rollup.config.js (-c 就是指使用 config)

config 如下：

import { nodeResolve } from "@rollup/plugin-node-resolve" 
import commonjs from "@rollup/plugin-commonjs"
import { babel } from "@rollup/plugin-babel"
import { terser } from "rollup-plugin-terser"

const packageJson = require("./package.json")

export default {
  input: "src/index.js",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true,
    },
    {
      file: packageJson.module,
      format: "es",
      sourcemap: true,
    },
  ],
  plugins: [
    nodeResolve(),
    commonjs(),
    babel({ babelHelpers: "bundled" }),
    terser(),
  ],
  external: ["react"], //跟rollup講說雖然有使用到 react，但不用一起打包
}

• input 就是主要要打包的檔案(們)
• output 就是要輸出的格式與位置，這邊已經先透過 package.json 定義好資料夾位置與名稱了

這邊使用幾個套件：

• plugin-node-resolve 後來發現可以不用，主要功能是整合有另外使用的第三方套件
• plugin-commonjs 使用cjs的語法
• plugin-babel 降維打擊(?)
• rollup-plugin-terser 將程式碼minify

然後打包

rollup -c --bundleConfigAsCjs

由於原本的程式碼使用了 import/export，直接打包會噴錯，依照官方說明加上 --bundleConfigAsCjs

恩，看起來有醜應該沒問題XD

實際上丟到其他專案使用也沒問題，讚讚！

其他發佈小調整

如何只發佈特定內容

前一篇講了發佈，這一篇講了打包，如果只想把打包後的內容上傳(其他都不要的話)：

npmignore

如同 .gitignore，npm publish 也會依照 npmignore

package.json 的 files[]

透過 files 定義要上傳的內容：

"files": [
    "/dist",
    "README.md"
],

如何限制對應版本

一樣在 package 定義 peerDependencies，只要使用者安裝的版本低於 peerDependencies， npm 就會噴錯

"peerDependencies": {
    "react": ">=17",
    "react-dom": ">=17"
},

真正結束啦！

然後終於結束啦！(ˇ_ˇ”) ƪ(˘⌣˘)┐ ƪ(˘⌣˘)ʃ ┌(˘⌣˘)ʃ (跳舞)

第一次參賽完就是：「終於結束了。」深深體會到要將研究後的知識與技術透過文字表達實在不容易，也有很多大大寫得很滿且清楚易懂，超級敬佩！

這次的整體下來的心得與收穫：

• 對 React 本身的又更加了解，例如：useEffect 不等於生命週期、終於知道 event delegation 在搞什麼魔法，觀念UP。
• 設計 hook 的不易：原本是抱著想設計高共用的 function，殊不知越往這邊走，設計的內容就越來越廣，內容也慢慢多，每一次覺得差不多只能先打住(雖然害怕功能不夠好，因為也怕遲交文章XD。)
• 寫文章：寫文章大概是我人生最難的事情，但透過這次也看了隊友以及版上其他文章，漸漸有一點收穫(吧)。

那之後呢？

目前發了一個 @build-own-hooks/use-toggle，之後會在慢慢地整理出覺得有用的內容給自己使用的

感謝有觀看的你，明年還要再見...嗎？