本文作者王超，现任快狗打车（原58速运）前端负责人。先后任职于人人网、奇虎，8年互联网大厂工作经验。
从0到1组建了快狗前端团队，负责团队技术体系的搭建，形成了以Webpack和Vue为基础、Node.js中间层为补充的，自动化、工程化、组件化的快狗前端技术体系。
本文将以王超的亲身经历讲述，为什么工程化是前端leader的必修课
前端工程化是现代前端的必备技能
Web前端这几年进化速度之快让人咂舌，很多前端工程师都不禁吐槽“学不动了”。
如今已经不是HTML、CSS、JS前端三剑客仗剑走天下的时代了。
以我的亲身经历举例。我在年左右进入前端领域，当时工作的主要内容是，将设计稿切图转成静态页面，然后用jQuery插件实现一些页面的轮播图、跑马灯等交互效果。
最后使用后端的模板语言如Smart、Velocity等将静态页面添加页面逻辑，代码交给服务端同学完成上线。整个过程中，JS框架以jQuery为主，CSS顶多用一下Less。
再来看一下如今的前端工作方式，以我所在的快狗打车前端团队为例进行说明。前端的开发框架以Vue为主，使用Webpack解决接口mock、代码检查、代码编译、构建、压缩、添加版本号、部署等全流程的工作。
涉及到的技术点有Vue、Vuex、ESlint、stylelint、Mock、Webpack、Sass、PostCSS等。对前端的要求相比几年前已经从单纯的JS、CSS问题变成了更多工程化为主的问题。
前端工程化是一个很大的话题，甚至到现在都没有一个准确的定义。我个人对前端工程化的理解是：“一切能提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化。”（原文句子参见我的课程内容）
前端工程化解决哪些问题？
在前端领域越来越繁荣，越来越复杂的今天，学习前端工程化又能给我们带来哪些好处呢？
1.极大提升开发效率
前端工程化的演进可以极大地提升开发效率。前端发展到现在，社区涌现出大量的优秀框架和工具，得以将前端工程师从繁重的工作中解脱出来。
举个例子，同样地给一个dom元素绑定一个click事件，使用纯JS可能这样做：
我们引入jQuery的情况下，就简单了许多：
如果在Vue中，既简单又清晰：
如果有大量的事件绑定，却没有开发工具的支撑，将有大量重复的代码需要写，想想就头疼，其效率之低可见一斑。
2.降低大型项目的开发难度
首先前端工程化中提倡模块化、组件化。
模块化的思想将大型项目的功能进行分解，分拆成一个个独立的模块。每个模块的开发难度直线下降。同时基于版本控制工具Git，多个开发者可以并行开发，提升开发效率。项目在后期迭代的时候，由于每个模块相对独立，耦合性极低，一个功能的调整往往只需要修改其中的一个模块就可以，风险可控。不至于出现改动一处代码，引发全局问题的情况。
其次，前端工程化提倡用完善的流程规范和代码规范来保证大型应用的质量和可维护性。
比如通过ESlint、stylelint对代码进行自动校验，通过评审、详细设计、开发、联调、测试、上线等每个环节的控制，确保项目的高质量和按时交付。向主分支合并代码必须经过codereview。流程规范确保了大型项目质量和可维护性的同时能够如期交付。
所以，应用前端工程化的项目，往往能够更好地规避风险，分散流程压力，降低开发难度。
3.更易获得面试官青睐
前端的岗位技能已经发生深刻的变化。有人甚至戏言成前端工程师为前端配置工程师。
fouber（张云龙）曾经在自己的博文中说：“前端是一种技术问题较少、工程问题较多的软件开发领域。”
依稀记得六七年前的前端面试题大概是这种风格：“如何实现水平垂直居中？”“js事件委托的原理是什么？”“常见的csshack方式有什么？”，“$(function(){})与window.onload有什么区别？”
而今天遇到的面试题大概是这种风格：“能讲下Vue实现双向数据绑定的原理吗？”，“Webpack中如何配置Babel？”，“promise和await/async的区别是什么？”
面试问题