一名合格前端工程师的进阶指南！都来认真看一下吧

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

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 等。

想得到大公司的青睐，候选人需要在前端工程化领域有较深的积累。自己是从事了五年的前端工程师，自己整理了一份最全面前端学习资料，从最基础的HTML+CSS+JS到HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴，需要可以私聊我哟，这是我的前端开发qun，【六零三】【九八五】【九九三】，直接群里下载，对于学习web前端有任何问题（学习方法，学习效率，如何就业）都可以问我，

三、谁需要前端工程化？

初中级前端工程师

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

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

期望晋升的前端工程师

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

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

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