如何優(yōu)雅、高效的做靜態(tài)頁面？
時(shí)間：2024-01-26 05:15:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2024-01-26 05:15:01 來源：網(wǎng)站運(yùn)營
如何優(yōu)雅、高效的做靜態(tài)頁面？：之前也考慮過這個(gè)問題，確實(shí)有些簡單的需求，犯不著用 MVVM，但習(xí)慣了現(xiàn)代化的開發(fā)模式又不想用回老方法，所以自己研究了一套方案，力求兼顧兩者。
其實(shí)方法都是現(xiàn)成的，只不過自己拿來組合了一下，沒別了不起的。
前端到最后無非就是：模板、樣式、行為。
模板方面我們選擇了 Pug，之前叫 Jade，和 EJS 是一個(gè)思路，重點(diǎn)解決 HTML 復(fù)用和模塊化的問題。
樣式方面我們選擇了 SCSS，同樣也是復(fù)用和模塊化。但我們沒有用 Bootstrap，因?yàn)橐氲拇蟛糠謨?nèi)容其實(shí)沒有用到，浪費(fèi)了，寧可自己寫。
行為當(dāng)然就是 JS，小項(xiàng)目就不上 TS 了，投入產(chǎn)出比太低，但是寫慣了 ES6+ 是真的不想寫 ES5，所以借助工具做了編譯，開發(fā)階段還是用 ES6+，配合 jQuery 一把梭。
現(xiàn)代化開發(fā)模式的一個(gè)重頭戲就是工程化的解決方案，包括編譯、檢查、打包、自動(dòng)刷新等一系列內(nèi)容，大大解放了開發(fā)者的生產(chǎn)力。
團(tuán)隊(duì)早先有一套基于 Gulp 的方案，當(dāng)時(shí)還沒用上 React 這些，只是處理一下 ES6 和 SCSS，簡單改一改就拿來用了。但 Gulp 4.0 遲遲不更新，讓我們擔(dān)心這個(gè)項(xiàng)目是不是要黃，還是想著能遷移到 Webpack 上來，因此后來又折騰了一套 Webpack 的配置。
node_modules、ESLint、Stylelint、HotReload、……這些就不說了，標(biāo)配了。
當(dāng)然還有一種思路，依然是用 React / Vue 開發(fā)，然后做預(yù)渲染，webpack 有相關(guān)的 plugin，結(jié)果也還不錯(cuò)，可以一試。
在線咨詢