[筆記] 哎呀！不小心刻了一套 React UI 元件庫 30 – 佈署發佈

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下打包佈署的相關設定。

---

[ Repo ]：https://github.com/andy922200/practice-storybook-react

---

內容

1. vite-plugin-dts 套件來搭配 vite.config.ts 使用
2. 要新增一個 main.ts 檔案，讓編譯時可以知道進入點，以及匯出哪些東西
3. package.json 要輸入 main, module, types, exports, files 這個五個鍵值和內容，這樣其他專案安裝時，才知道怎麼找檔案
4. 可搭配 npm link 進行測試，可參考此篇：[指南] 用 Vite 開發一個 NPM 套件 ( 以 Parse Localized Number 為例 )

---

程式碼

https://github.com/andy922200/practice-storybook-react/commit/d9228751dc449f5c1faf33a4b611bbbd6c3b3305

---

參考資料

1. Create a Simple React Component Library with Vite
2. 如何使用 npm link 進行 node module 測試

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 瀏覽器的跳轉處理之 location.href 和 location.replace
• [筆記] Vite 導入 Exceljs 輸出簡易表格
• [筆記] 程式必修課！離散數學與演算法 – 22
• [筆記] 程式必修課！離散數學與演算法 – 21
• [筆記] Vue3 實作類似 Checkbox 的 Radio 元件