積沙成塔，滴水穿石

如果是用JS 框架，對於 npm run dev 一定很不陌生。 以svelte 來說，npm run dev  底層是呼叫vite 。 由於在某些情況下，需要關閉HMR(熱模組)做功能上的校條與監控。 這時候 就可以加入 hmr:false ，將熱模組關閉 (圖1) 熱模組HMR關閉(圖1) 這樣子在開發功能上，就可以透過f5 更新來做頁面觀察了。 心得 HMR 熱模組是雙面刃，好處是 不需要時刻更新按f5，有新的功能寫好就會自動更新。 換而言之，在撰寫功能時 時常也會看到404 畫面，因為功能還沒寫好 就自動更新了。 最近因為要觀察背景更新 和writeable 的狀況，就把hmr 關掉 做檢查。 在做檢查時 發現到 打包出來的環境 和 關閉hmr 的開發環境很像。 在檢查 和使用功能時，不仿也關閉hmr 進行測試，會有不少收穫。

前情提要 以前在寫api的時候，幾乎都是分開寫，各別檔案再寫的時候分開寫各自的API，但時隔3個月再回來看的時候，會忘記自己哪個API 寫了什麼，在做管理的時候比較麻煩。 有的時候，打包出來的檔案會因為佈署到不同環境而更改 API的位置。 例如: A電腦 192.168.0.123、B電腦 10.1.207.xx、C 電腦 211.207.0.1xx  當有寫API 的時候， 集中管理就派上很大的用場。(圖1) API集中管理(圖1) 有了集中管理，在更換API的時候就會比較方便.... 但如果佈署的主機越多，也是需要一個文件來做環境的管理。 遇到的問題 每次佈署環境，API就要再換一次... 因為總不可能 每次換個環境 就還要時刻更改api 網址。 解決問題 查了一下官網，發現有個.env 可以寫整個管理配置 。 就像是寫yml一樣，把所有參數都寫一塊，方便整理。 (圖2) .env 配置 (圖2) 需要的時候 在引用就可以了  (圖3) 引用.env (圖3) -------------------------------------------------------------------------------------- 心得 會這樣子提出來寫，是因為在佈署會時常需要變更環境。所以在打包的時候，就能一鍵切換環境，也不需要打開api.js 去更改，而是直接.env 再進行打包就可以了(圖4、圖5、圖6) .env 配置 (圖4) package.json (圖5) svelte.config.js (圖6) --------------------------------------------- 延伸閱讀 .env環境配置

前情提要 這次在專案上使用了sveltekit 作為前端框架，UI則是用bootstrap， 在列表頁的時候需要每5秒更新(圖1)，取得最新的生理資訊。 列表頁 (圖1) 但每5秒去得取api，其實是很耗資源的。尤其是長時間停留在頁面。(圖2) Network背景資源(圖2) 主想法 為了減少資源耗損，當按下「檢視」打開彈窗(modal)的時候，背景更新可以先暫時，畢竟彈窗(modal)會佔據整個版面，focus都會在彈窗上，等彈窗(modal)關閉後 再繼續執行背景更新。(圖3) 彈窗開啟(圖3) 實際作法 如果要觀測彈窗(modal)，就會需要動態監測dom的變化(圖4) ， 需要觀察 modal-open，是否有開啟。 動態監測dom(圖4)    在做法上使用了 MutationObserver 來監視dom的變化，當監測到 body 的class 出現了.modal-open，代表彈窗已開啟，就可停止背景更新。 (圖5) MutationObserver監視.modal-open(圖5) 遇到的坑 照著 MutationObserver監視.modal-open 來做背景更新的開關控管是成功了，但卻也延伸了其他問題— —「 切換到其他頁背景更新並不會停止」 。  切換到了B頁→A頁，B的背景更新並不會停止；從A頁 → C頁 ，A頁的背景更新並不會停止(圖6) ，也就表示 背景更新不會隨著切換頁面而停止。 主要是因為在同一個SPA的特性，頁面不重載，DOM並沒有銷毀。 SPA的特性，頁面不重載(圖6) 填坑--解決方法 加入了writeable 動態的背景更新「開關管理」，更新writeable的狀態，搭配 $  動態的讀取資料狀態的變化，類似redux的狀態管理 。因為用的modal在每頁都是相同的，並不會因為切換頁面造成dom重新渲染，所以監測也並不會因為切換頁而消失。 設立了一個 $modalObserver='' ，當彈窗(modal)開啟才給值  $modalObserver=0， 關閉 $modalObserver=1 $modalObserver 就可讀取到到最新的modal狀態，進而去執行該頁的背景更新，也就能避免累加的背景更新。(圖7) 當在A頁開啟modal的時候，就執行A頁的背景更新；當在...