一名合格前端工程师的进阶指南！

本文作者王超，现任快狗打车（原58速运）前端负责人。先后任职于人人网、奇虎360，8 年互联网大厂工作经验。

从 0 到 1 组建了快狗前端团队，负责团队技术体系的搭建，形成了以 Webpack 和 Vue 为基础、 Node.js 中间层为补充的，自动化、工程化、组件化的快狗前端技术体系。

本文将以王超的亲身经历讲述，为什么工程化是前端 leader 的必修课

 

 

前端工程化是现代前端的必备技能

 

Web 前端这几年进化速度之快让人咂舌，很多前端工程师都不禁吐槽“学不动了”。

如今已经不是 HTML、CSS、JS 前端三剑客仗剑走天下的时代了。

以我的亲身经历举例。我在 2011 年左右进入前端领域，当时工作的主要内容是，将设计稿切图转成静态页面，然后用 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 对代码进行自动校验，通过评审、详细设计、开发、联调、测试、上线等每个环节的控制，确保项目的高质量和按时交付。向主分支合并代码必须经过 code review。流程规范确保了大型项目质量和可维护性的同时能够如期交付。

所以，应用前端工程化的项目，往往能够更好地规避风险，分散流程压力，降低开发难度。

3. 更易获得面试官青睐

前端的岗位技能已经发生深刻的变化。有人甚至戏言成前端工程师为前端配置工程师。

fouber（张云龙）曾经在自己的博文中说：“前端是一种技术问题较少、工程问题较多的软件开发领域。”

依稀记得六七年前的前端面试题大概是这种风格：“如何实现水平垂直居中？”“js 事件委托的原理是什么？”“常见的 css hack 方式有什么？”，“$(function(){}) 与 window.onload 有什么区别？”

而今天遇到的面试题大概是这种风格：“能讲下 Vue 实现双向数据绑定的原理吗？”，“Webpack 中如何配置 Babel？”，“promise 和 await/async 的区别是什么？”

面试问题关注的层次已经有了很大差别。

如果想进入大公司工作，前端工程化更是需要具备的基本素质。大公司的业务往往非常复杂，而且对稳定性的要求极高。与之相对应的前端工程化程度很高，各种配套的基础建设很成熟。

比如美团点评体系化的工程化方案、移动组件库 Vix、自动化测试工具 Freekite、Hybrid 功能体验的解决方案 Titans 等。

想得到大公司的青睐，候选人需要在前端工程化领域有较深的积累。

 

 

谁需要前端工程化？

 

初中级前端工程师

初级中级前端工程师工作经验较少，技术的宽度和广度都不足，一上来整体掌握前端工程化肯定是有困难的。所以对于这部分同学来讲，首要的事情要学会去“用”，循序渐进地去了解其中的原理。

例如在开发之余，自己学一学如何实现一个简单的脚手架工具，了解一下日常开发必备的脚手架是如何实现的，以点带面地学习里面用到的技术点。

期望晋升的前端工程师

前端工程化能力也是一个资深前端的必备技能。工作好多年了，如果连前端工程化都知之甚少，甚至连一个基本的脚手架都不能自己搭建，怎么能带领团队呢？如果去参加公司的晋升，也是没有说服力的。

想要晋升高 T，必然需要在效率和性能优化等方面有深厚的积累和贡献。

所以，无论你是处在什么阶段，深入了解一下前端工程化都是极有必要的。

很多开发者由于本身入行较短，或者很多工作多年的开发者由于公司业务的原因，没有机会接触到前端工程化领域。

对这些不了解前端工程化、或者想要加深了解前端工程化的读者，我特别设计了一个课程《透视前端工程化》。

扫码了解课程详情

▼

 

课程内容以 Vue 入手（其他框架可对应调整），结合我在团队中的工程化实践，带领大家从零开始搭建一个脚手架，将搭建脚手架用到的技术点逐一拆解，大家看完后，可以对脚手架和工程化思想有个较深入的理解。

Python 第一地位稳了!微软正式拥抱 Python !

https://edu.csdn.net/topic/python115?utm_source=csdn_bw

相信在学完本课程后，大家至少有以下几点收获：

• 对前端工程化有一个系统认知，且前端知识广度上有大幅提升；

• 能独立设计一套前端工程化解决方案，可直接应用于实际业务；

• 帮助面试和级别提升，进入更好的平台，获得更好的薪酬。

      

对了，我还为购买这个课程的读者设置了答疑交流的微信群，大家可以在课程第 03 课内容中获取到入群方式。

点击阅读原文，购买课程后一起交流，共同进步吧！