如何优雅、高效的做静态页面？
时间：2024-01-26 05:15:01 | 来源：网站运营
时间：2024-01-26 05:15:01 来源：网站运营
如何优雅、高效的做静态页面？：之前也考虑过这个问题，确实有些简单的需求，犯不着用 MVVM，但习惯了现代化的开发模式又不想用回老方法，所以自己研究了一套方案，力求兼顾两者。
其实方法都是现成的，只不过自己拿来组合了一下，没别了不起的。
前端到最后无非就是：模板、样式、行为。
模板方面我们选择了 Pug，之前叫 Jade，和 EJS 是一个思路，重点解决 HTML 复用和模块化的问题。
样式方面我们选择了 SCSS，同样也是复用和模块化。但我们没有用 Bootstrap，因为引入的大部分内容其实没有用到，浪费了，宁可自己写。
行为当然就是 JS，小项目就不上 TS 了，投入产出比太低，但是写惯了 ES6+ 是真的不想写 ES5，所以借助工具做了编译，开发阶段还是用 ES6+，配合 jQuery 一把梭。
现代化开发模式的一个重头戏就是工程化的解决方案，包括编译、检查、打包、自动刷新等一系列内容，大大解放了开发者的生产力。
团队早先有一套基于 Gulp 的方案，当时还没用上 React 这些，只是处理一下 ES6 和 SCSS，简单改一改就拿来用了。但 Gulp 4.0 迟迟不更新，让我们担心这个项目是不是要黄，还是想着能迁移到 Webpack 上来，因此后来又折腾了一套 Webpack 的配置。
node_modules、ESLint、Stylelint、HotReload、……这些就不说了，标配了。
当然还有一种思路，依然是用 React / Vue 开发，然后做预渲染，webpack 有相关的 plugin，结果也还不错，可以一试。
在线咨询
