大家好，我是奶綠。 記錄一下為何將 vite 換回 webpack。 其實問題不是 vite 的錯，請大家不要擔心。 公司的電商平台選用 shopify，所有的 js,css 檔都需要使用 shopify 提供的 liquid 語法載入 js，平台會自動將檔案上傳到他們的 CDN 主機上 <script type="module" src="{{ 'app.min.js' | asset_url }}"></script> 經過編譯後會得到像這樣的路徑 <script type="module" src="//www.positivegrid.com/cdn/shop/t/386/assets/app.min.js?v=40234525283226099171698650715"></script> 編譯後檔案路徑有加個 ?v= 版本號 但因為使用 vite 會使用原生的 esmodule 載入，路徑就無法帶版本號，就有一定的機率因為 CDN 主題 cache 的問題，載到舊的檔案，然後就爆掉了。

大家好，我是奶綠， 日常開發上要直接在 Production 站上捉 Bug，總不能一直傳檔上去測試吧， 過去可以使用一套 Chrome Extension Resource Override 來攔劫遠端的 fetch，改讀本機的檔。 現在新版的 Chrome 也內建了啦。 What's New in DevTools (Chrome 117) - Chrome Developers Override XHR/fetch requests and hide extension requests from the Network panel, see changes in fetch priority in the…developer.chrome.com 使用方法也很簡單 1 Open devtool 2 switch Network Tab 3 找到你想要 override 的連結，點擊右鍵就會看到 override 的選項 4 Chrome 的需要讀取本機的權限，並選擇一個資料夾。 5 如影片，就可以直接在 chrome 上改寫原始碼，就會自動同步回剛剛指定的資料夾。

大家好我是奶綠，今天來分享二個 React experimental 新的 Hooks。 1 — useEffectEvent 這個 hook 是專門搭配 useEffect 一起使用， 過去在使用 useEffect 時，為了要取得最新的值，只要函式裡有用到的變數都要放到 useEffect dependency 裡。 假設要做一個聊天室 Connection 功能，當 roomI …

大家好，我是奶綠 今天來聊聊將 Webpack 更換至 Vite 的心得。 Webpack 的缺點就是當專案越來越大時，速度就越慢，再加上現在瀏覽器都原生支援 type=”module” 了，就不需要再像過去透過 Webpack 來 chunk 共用 module。 分享一下將公司專案由 Webpack 換到 Vite 的心得。 不一樣 1：package.json Vite 採用 Ja …

大家好，我是奶綠茶 今天來分享在 WebConf 2023 研討會所講的主題 WebComponent 其中包含了 WebCompnent 的基本語法 WebComponent 生命週期 WebComponent 與 petit-vue 的應用。 祝大家學習愉快

大家好，我是奶綠 最近在研究 Next.js 13，發現官方的範例使用到了一個新的 React.use 函式，深入追下去後，發現這是 React 下一版將加入的新 hook，他可以讓我們用更少的程式碼來 fetch Data。 因為新版還沒發佈，所以先需要手動將 React 升級到 18.3.xxxx 版。 先來看目前怎麼使用 React 來 fetch …

大家好，我是奶綠茶，除了 React 外，還有一套叫 preact，簡單來說就是另一個開發團隊推出的 JS framework，語法和 React 99% 都一樣。 其中最酷的他使用 Signals 來取代 React.useState，語法更簡單，也不需要用什麼 useEffect 來掛一堆相依性判斷。而且還有同步推出 React 可以用的 sign …

大家好，我是奶綠茶，今天來聊聊 vue 裡的 transition-group 先來看一下官方的範例： https://vuejs.org/examples/#list-transition 在 v-for 的外層新增一個 TransitionGroup Component，當元素新增或刪除時，就可以有動態效果，簡單又好用。 當新增元素時，下方的元素會有個往下移的態動效果，單看 CSS 的部份， 怎麼想都不可能只用純 CSS 就做到。 還好官網的範例給了一個重要的連結。 FLIP list transitions with the built-in <TransitionGroup>. https://aerotwist.com/blog/flip-your-animations/ 然後再去翻 vue 的原始碼，就可以看到 TransitionGroup 就是使用上方的 FLIP 手法。 https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/components/TransitionGroup.ts

大家好，我是奶綠 今天來聊聊在 React 裡如何取存 window 變數。 window 很好用，因為他只有一個，所以全站可以共用變數，但 window 裡的變數有更動時，react 不會知道，所以我們要加工一下。 宣告一個 window.update 的函式，改變數的同時，也 dispatch CustomEvent。 window.myVari …