一路高歌的前端工程化现如今早已不是那个仅凭着HTMLJavaScriptCSS就能仗剑走天下的时代了，日益复杂的we

现如今早已不是那个仅凭着HTML、JavaScript、CSS就能仗剑走天下的时代了，日益复杂的web应用，动辄数十人的共同开发，层出不穷的前端技术栈，一步步推动前端工程化的加深。

前端工程化说到底就是以一切能提质、提效的手段或是工具建立起来的一套完整的前端体系。当然这套体系并没有绝对的标准，毕竟适合自己团队的才是最好的。

接下来主要介绍下目前阶段我们团队的前端工程化实践。

首先我们应该知道前端开发必不可少的三个阶段。

需求准备->开发实现->部署上线废话不多说，先上一张系统架构图镇楼。

对此图有任何疑问的，请联系作者，在此不做具体介绍说明。

简单来说，前端工程化最主要的三个特性就是复用性、规范性和自动性。

复用性最明显的表现形式就是模块化和组件化。

规范性指的是为了保证代码质量，减少个体差异及后期维护成本，提升协作开发效率而制定的一系列准则。

1.git-flow规范

lables：标签提供了一种简单的方法来对问题进行分类，或者基于描述性的标题（如bug、feature、文档或任何其他文本）。它们可以有不同的颜色，描述，在整个问题跟踪器中都可以看到。milestones：里程碑是跟踪实现这一目标进程发展的宝贵工具。从里程碑，您可以查看问题的状态，合并请求，贡献者以及每个标签的已打开和已关闭的问题。issues：创建Issue->添加Labels->指定Milestone->拆分需求branch：每当有新需求时从master分支checkout出一个需求分支，分支命名规则p_#id注：id为该需求所创建的issueid。commit：加标签及关联issue。如gitcommit-m[type][#id]注释信息（type为标签类型，如feature、bugfix等）codereview：创建mergeRequest并assign给codereviewer2.项目结构规范

目录结构说明：.cz-chanelog:gitcommit时的提交格式build文件夹：项目打包配置mock文件夹：使用mockjs的mock的数据存放处src：assets：图片、样式等统一存放处components：公共组件存放处directives：如果项目中添加指令的话，统一存放处filters：过滤器内容的统一存放处mixins：vue里的混合机制--mixinsstore：vuexutils：公共方法存放处views：vue页面app.vue：统一入口文件index.html：模板文件index.js：挂载routes.js：路由配置文件3.设计规范

4.接口规范

5.编码规范

JS编码规范->ESlint规范、CSS编码规范、图片规范等等6.单测规范

7.CodeReview规范

代码规范类、语法使用类等等自动性任何简单机械的重复劳动都应该让机器去完成。1.项目搭建阶段

一键式的项目搭建脚手架。（支持vue/react+webpack，SSR模板，TS模板，mock等）2.构建阶段

代码转译：即预编译，指高阶js语法ES6+、TS等的自动转换；less/sass语法自动编译成css等；性能优化：模块合并：分析依赖文件，将同步依赖的代码打包合并。文件压缩：减少文件大小，常用的有代码压缩和CodeSplitting。chunkhash指纹：解决浏览器缓存引起的静态资源更新问题及文件缓存全部失效问题。happypack多线程打包等文件监听：浏览器的自动刷新等；3.commit阶段

代码巡检：自动化检查及规范代码；单元测试：自动化运行单测用例，保证功能的可靠性。4.部署阶段

项目部署：一键式部署平台。（机器的自动分配、项目的一键式部署。）总的来说，前端工程化体现的是一种思想。任何的架构、任何的策略，都只是针对目前的一种工程化实践。随着时代的发展、技术框架的日趋成熟，前端工程化也必将渗透更深。