Orz在芒果画网页已经画了1年+了,实在是要吐了。虽然自己搞了套mgtv-mobile的脚手架,充其量也就是让自己画网页画的舒服点而已…… 可现在我真的不想画网页了,要吐了,要疯了,永远都是改不完的需求,永远都在明天就要上线的状态奔波。


去年年底成功完成了部门h5的组件化脚手架,虽然是自己业余时间做的,效果倒是挺不错。至少现在已是标配了,es6也是爽爽爽,算解放了部分生产力。

然而该吐血的还是吐血,一个脚手架而已,也无法对当前业务产生根本的改变。需求变变变,产品改改改,上线急急急。我等民工依旧埋头于画网页的繁重体力劳动中无法脱身。

外面还有无数的花花世界在招手,pwa,amp,node,canvas,webgl,rtc我都TM想撸啊!!!

恰巧某个产品同事也提出了一个模块化的想法,就一起动手开搞了。

产品手头有个活动页,于是准备先拿该项目开刀。整理了下需求,并将各个需求分割成了一个个模块。然后我再将vue-webpack进行一下改造,以适应这类活动页单页面的需求。


改造过程

  1. 确定合适的结构目录
    在src中新建page文件夹,每个page下都包含有asset、app.vue、main.js,已对各个页面进行配置管理。

  2. 出入口动态化,这里主要参照了这个方案:Link

  3. 静态地址配置 Link
    主要是为了方便多页面下无需频繁更改静态地址配置,直接一个 ./ 搞定

  4. 编写脚本来进行页面的增删
    这里我个人使用了 shelljs ,将其写入 npmScript 中,方便在命令行中对页面和组件进行增删。

其实具体思路依旧和个人之前编写的那套脚手架相似,大致如图:


现在这套方案已经用了两个项目了,之后能否像之前的脚手架那么顺利难说。毕竟脚手架并不需要产品和设计做配合,只要开发人员自己用的爽就行。而模块化就需要从需求的源头开始做改变……

还是那句,总之加油吧。

希望有朝一日,能从繁重的画网页工作中解放出来。