鐵人檔案
今年的鐵人賽前半會來分享個人目前的前端 React 專案基礎建設！從零開始到完成檔案打包，中間包含「沒想到其實可以寫這麼少」的 webpack 設定。從此告別 create-react-app 模板 (≖ᴗ≖๑)
後半會來聊聊（八月底剛發布 3.0，但今年的文章還是以 2.0 為主，因為 breaking change 拿掉了我常用功能，只好強製鎖版直到鐵人賽結束的） astro。預計介紹基本操作方式，以及個人是如何透過 astro 把自家技術部落格翻修到 2.0 版本。
有興趣的朋友歡迎訂閱，感謝看到這裡的你 (｡・ω・｡)
大家好，這半年來印象比較深刻、又能集結成文章分享的開發主題分別是： 從零開始的前端專案基礎建設 技術部落格改版，從 hexo 改用 astro 並且大綱...
今天是捨棄 create-react-app template 的第一天。面對全新全空的專案資料夾，首先從設定 package.json 開始。 提示：本次鐵人...
環境已經確保，可以來做點比較像樣的事情安裝套件了。 本文 安裝套件 安裝時，建議根據套件在專案中發揮的功能來決定要分發到 dependencies 或是 dev...
今天來為專案加上 TypeScript 設定，同時也會檢視目前為止的專案資料夾結構安排。 本文 設定 tsconfig.json 如果還沒安裝 TypeScri...
昨天說明了整包專案的資料夾結構規劃方式，今天來聊聊個人通常會根據哪些規則來分類 React 元件。 src/component 內容 以一個包含「landing...
畫面與功能做完後，現在需要一些指令來讓專案在跑起來。而如果一個專案沒有在 README 提到任何啟動資訊，通常工程師會往 package.json 中的 scr...
接下來幾天會來介紹個人開發時慣用的 webpack 設定。會從零開始撰寫，處理範圍如下： .env 讀取、驗證、帶入設定 處理 TypeScript 檔案（...
在第 4 天個人曾經推薦在 tsconfig.json 中透過 paths 設定短路徑、省去在檔案間互相 import 時計算路徑的麻煩。而今天就會來詳細解釋如...
今天會來介紹平常慣用的 webpack 設定，除了處理一般的 .css 檔案外，也能支援 css modules。 使用 css modules 的好處是能夠將...
今天會先分享個人慣用的靜態資源設定，接著會介紹我滿喜歡的 svg loader @svgr/webpack。這個套件能讓 .svg 直接以「元件」的形式被引用：...
