传统的前端开发是与后端语言深度结合的。
- 前端提供静态页由后端进行动态渲染。
这造成HTML是不能进行打包的。因为后端程序员需要修改静态HTML。(HTML中添加后端模板语言)
- 当HTML不能打包时导致实际开发环境的HTML和你本地的HTML是不同步的。
为什么会不同步?因为后续的维护和新需求都是在后端动态代码上进行。不可能每个维护和新需求都提交静态HTML然后让后端程序员重新动态渲染一遍。
- 当HTML不同步时导致CSS和JavaScript也只能基于实际开发环境的HTML进行配套开发。
要使本地的静态HTML和实际开发环境的HTML同步不现实。这导致只能修改打包后的CSS和JavaScript(实际开发环境的CSS和JavaScript)。这导致CSS和JavaScript也不能打包。因为谁也不想修改打包后的代码。
以上是最近个人的思考。因为现在所处工作的团队已经没有使用传统开发的情况了。但是鉴于还有很多公司还在使用传统方式进行开发。为防止以后出现产品经理要求将传统项目强行转换成webpack所进行的思考。
不知道我的说法是否正确。是否可以在后端程序员完全不懂JS的情况下将传统开发方式切换到现代开发方式?
webpack 给开发者的自由度还是比较高的,在前后端不分离的前提下,使用 webpack 可能会比较麻烦,但也仅仅是比较麻烦而已。
我现在手头的项目就是基于 thinkphp 的,前后端也没有分离,但是幸好只是个官网,动态内容不多,所以无碍我使用 webpack 来引入“现代化”的开发方案,以便愉快地搬运 npm 上的宝贵财富。
HTML 方面,本来想研究下 eggjs 或者 nextjs ,以便使用 Vue 或者 React 的模块化方案,但是时间比较紧,所以用 ejs 做了 HTML 的模块化。这一操作遗祸甚多:我需要写 ejs 来粘合各个模块,然后用 thinkphp 的模板语言来引入变量,最后用 Vue 来赋能页面动态内容。HTML 勉强算是可以“打包”了,输出的 HTML 文本扔给后端进行渲染。
JS、CSS 方面,一开始想的是使用 snowpack 以支持 ESM 的使用,然后使用 babel 降级支持比较旧的浏览器,但是时间紧迫,为了避免填坑,snowpack 的使用需要无期限延后了。鉴于以 snowpack、Vite 为代表的真“现代化”开发方式尚未流行开来,这种方式也还算现代化。
从上面也看得出来,整个项目中最难搞的是 HTML 。html-webpack-plugin 能给予的帮助有限,需要写一些 node 代码来辅助;另外我必须手工“烘焙”出首屏的静态内容,以免让用户看到 vue 初始化前模板的狼狈模样,这使得工作量有所增加。
所以,虽然我的一些设想未能实现,但还是可以证明:即便是以后端主导方式开发的老旧项目,仍旧可以使用时下流行的工程化方案,这一过程与后端全无关系。当然,冲突和不便在所难免,配置的学习和试错成本也比较高。