這2天做了一個實驗。在非module傳統的網頁，要實現改名和避免緩存。原本這個事情早在幾年前就做過借助gulp的方式或者fis3 的工具來完成。然而隨著nodejs 來到了24版本后，似乎nodejs的版本這事情就變動復雜多變了。
為什么那么麻煩？實際上開發一些靜態的網頁不需要引入到模塊化的開發如import /export的寫法，完全是可以省力氣。然而有時候喜歡折騰，這個情況就遇到一個任務，如何打包？如何完成這樣一個任務。目前能根據工具選擇有vite/rollup rolldown ,webpackgulp,parcel，rspack 這些工具。
先說說早期工具，gulp的版本開發已經是落伍了，朋友推薦使用零配置的parcel。這個工具正如傳說一樣，沒有什么配置。雖然官網提供api，我并沒有很細看。但是也遇到一些版本變化的問題。由于ai的喂給的數據過于陳舊。很多時候，在和大模型對話過程，就會遇到各種折騰。一方面確實版本差異化，加上不熟悉。這些就導致打包的時候 parcel 1.x和2.x不同。 經過改成2.x 后才完成這樣一個小小任務。
然后對于vite 也是可以完成這樣一個情況。這個地方有小小改動。如加入module支持，這樣日常當中，寫css 和js 的方式，改成import 導入。這樣打包也會比較快。
這個只是很小的實驗樣本。利用了import 特性。打包后會出現的方式。這種需要部署到服務器去才能看到。不能直接查看。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My Vite Site</title><!-- Vite 會自動注入 CSS 和 JS -->
</head>
<body><div id="app"></div><script type="module" src="./src/main.js"></script>
</body>
</html>
這個方式的實驗實際上并不會太難。讓我覺得意外的，如果不用module 那樣寫法。配置起來，哪怕AI 理解起來復雜是有點多余。事情會變得復雜，不是變動輕松。
相反各種webpack 的配置直接 勸退人。在完成非module 網頁，parcel 可以更加便利。宣傳0配置的情況，若果遇到一些改名或者文件夾導出的文件結構，有時候也會不知道如何入手。文檔和官網是有提供。我并不是想去研究這個工具深入去。
在這里大大打了一個疑問？為什么把前端搞得那么復雜，讓人無奈是，打包和構建的工具那么多，一個個又面對nodejs 的折騰。直接打開網頁就能到。這難道不香嗎？
其實有時候，面對復雜多變的模塊化設計訴求。這些構建工具，parcel 還是vite，rolldown，rspack 也是有很多好處存在。
雖然AI的到來，這些復雜版本和工具化，包括各種工具的衰落期是不是到了一個邊緣？統一構建和打包也是一種趨勢了。
不得不得提一下nvm 和fnm的工具上，在管理和切換nodejs使用的時候，官方或者社區都有處理這樣的事情。多版本已經不是什么秘密。使用過程和安裝過程。fnm 雖然是rust編寫。使用安裝體驗直接勸退不少人。
nvm 老牌管理工具，雖然nodejs 的版本，早期一些12 版本，早就不維護了。目前面對每年的版本號都會迭代。前端工具似乎變動越加激烈，稍微不慎，版本號就會讓人產生很大老火。package.json 對于每一個庫所依賴的情況。nodejs 并不是越新就越好。社區一旦跟不上。很多工具沒有生態加持下，一個態度就足以讓很多社會化的產品倒下。
rolldown 有更多想法吧。看下一代的打包和構建工具似乎會帶來更多驚喜。個人喜歡在rspack 和rolldown 兩者來回看了。
不知道你喜歡那些了？
但是我選，就簡單傻瓜打包就足夠了。那么多配置很多時候都不愿意去研究。天下對webpack 早已吐槽不止。
