活动项目的前端工程化实践

个人思路和理解,仅做记录用

背景

最开始接触到活动项目(大家常说的H5)时,用于开发的技术栈为jquery.

项目前端目录结构大概如下:

www/ #该目录与域名同级,里面的内容全量同步至服务器
├── source/ #源码目录
│   ├── act1/ #单个活动项目
│   │   ├── src/ #单个活动项目源码
│   │   ├── index.html #构建后的index
│   │   ├── css/ #构建后的css文件
│   │   └── js/ #构建后的js文件
│   ├── act2/ #单个活动项目
│   └── act3/ #单个活动项目
├── favicon.ico
├── NgnIMKLhyX.txt #域名校验文件等
...

旧项目开发流程

开发一个新的H5流程为:

• 在source下新建文件夹act4,结构与act1保持一致

• 在act4的src目录中添加文件(html、css、js)进行开发

• 在act4/目录下打开terminal,使用gulp命令进行构建,构建后的文件会自动生成在act4/目录下,为了便于代码回退,不会清理掉上一次构建的内容

• 从www/目录开始,保持目录结构,将act4/中构建好的文件压缩成zip,上传至发布平台进行发布(可理解为同步www目录下文件至服务器,只是这个步骤为增量发布)

• 上线后访问 example.com/source/act4/index.html 即可访问到开发好的H5项目

存在的问题

• 新建活动时大量重复的复制粘贴操作,繁琐

• 活动无分类目录,有时候类似的活动文件夹命名困难,想找一个活动的源码也很困难

• 由于是开发自己建立新项目,而框架只做文件存储和发布用,构建流程只压缩和转译css、js,并不会抽离模块,因此开发者会引入额外第三方库或者工具,例如:有人使用jquery,有人使用vue,甚至有人用脚手架在目录下自己单独构建,因为没有统一规范,当需要迭代和维护时,面临的问题不亚于重新开发,包括但不限于:理解他人所用技术栈、重新安装依赖(针对不同node版本和npm源)等

• 由于技术栈绝大多数是jquery,dom一半在html一半在js中,并且没有统一的数据管理功能,维护起来也十分困难(被诟病无数)

• 由于旧文件未及时处理,导致线上内容会慢慢积累,最终达到900+M,严重影响了上线发布效率,从点击发布到线上更新需要等待大概半个小时.

• 不利于公共代码抽离,除了针对一些通用函数能够进行封装之外,对于同样的UI组件逻辑如果需复用还是需要靠复制粘贴

问题的解决大致思路

• 需要统一规范,包括但不限于文件目录规范、命名规范、技术栈规范、开发规范

• 使用git做分支管理,通过提交记录tag或者hash进行代码回退,不需要保留额外文件,缩减文件数量

• 使用细节可控的构建工具(webpack等,还有就是我能会的,哈哈)

• 使用cdn,不必把所有的静态资源都存放到自己服务器上

• 采用更优雅的技术框架(Vue、React等),方便组件的封装和复用,同时也带有配套的数据仓库(Vuex、Redux等)