前端工程化初探

前言

目前我所理解的前端工程化, 顾名思义, 就是让前端项目具备工程特性: 满足规范化,流程化,自动化等要求, 随着大前端时代下前端发展的速度越来越快, 项目也日渐复杂起来, 前端项目管理也越来庞杂, 造成项目维护性差,开发效率低等弊病吧; 在接手了公司前端业务一段时间后, 也感觉存在这些问题, 目前正在尝试将前端工程化这一块做起来...

前端工程按项目阶段划分可以分为: 项目初期构建(这是忽略项目预研,技术选型等,单从工程开发的角度来看); 中期的项目开发; 后期的项目测试,优化以及持续集成和部署. 其实就是某个项目从0到1的过程, 一个约束团队统一行为的过程.

项目构建阶段

项目初期要制定好规范, 用来约束团队人员的开发行为,便于管理,目前想到下面几点;

1.git流程规范

git分支管理: release: 线上发布分支, pre-release: 预发布; dev:开发分支; xxx-dev: 个人开发分支  
commit规范管理: 描述以功能模块为单位进行提交

2.目录结构规范

以vue项目为例, 目前项目都是以vue脚手架进行搭建的,然后在脚手架的基础上进行相关扩展配置; 

1.项目采用 vue + webpack模板; 运行命令 vue init webpack project-name即可, 根据需求选择配置项

2.创建目录和相应文件

2.1-构建目录build, 可以分为测试,预发布,线上三种环境配置,看具体需求

2.2-环境变量配置config, 配置不同环境下接口,或者其他变量

2.3-项目文档readme, 项目规范及结构概述, 这个比较重要

其他文件夹都大同小异; 都在readme中写出来了, 暂不做概述; 后面会对常用的webpack相关配置做一些总结

项目开发阶段

到了开发阶段后, 我们需要遵守的就是组件化和模块化的开发思想; 按照项目预先制定的规范进行组件化和模块化开发;

比如我们拿到UI稿图后, 先将页面看作一个大型组件, 然后拆成若干中型组件, 发现相同的地方我们继续拆成公共的基础组件...这就是组件化开发;

模块化呢? 模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。我们平常使用的ES6模块导入系统以及完全够用了; 这样我们可以将js, css, 静态资源等分成不同模块文件便于管理, 这些一般都会写在项目规范中;

其实这一个过程,我觉得更重要是团队成员按照既定的项目规范去落实自己的开发任务...

项目后期阶段

当我们开发完前端项目, 需要自己进行单元测试, 自动化构建, 部署测试环境,线上环境等等...

像单元测试,自动化构建这些, webpack就可以帮我们搞定, 不过需要注意一些配置细节; 自动集成部署可以采用gitlab-ci或者jenkins等一类 工具 来搞定; 会涉及到一些服务器脚本方面的知识;

我这里采用的是gitlab-ci方案;

大致过程是:

1.先到目标服务器注册gitlab-runner服务, 去仓库拿到url和token去服务器register

2.再到项目文件下创建一个gitlab-ci.yml文件, 写上 shell 脚本; 当然你在注册的时候也以选择 docker 等其他方式, 
一个简单的脚本示例, 只有构建阶段; 这里面可能还会涉及到服务器目录的一些操作权限问题; 需要chomd修改一下;

这样每一次推送测试分支, 代码会自动在服务器上进行构建,并完成部署发布, 避免手动上传项目带来的麻烦

发布项目还需要我们去配置web服务器; 这里用的nginx服务器, nginx一些常用命令还是要掌握的

总结一下

前端工程化目前的理解就是: 开发中所制定的一套流程控制和规则,旨在提高开发生产力; 包括了项目搭建, 项目解耦开发, 规范约束, 自动化构建,测试,发布,部署等一系列内容;

后面会把自己遇到的一些问题更新到文章中...