什么是前端工程化？

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

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 可能这样做：

document.getElementById('myDom').addEventListener('click', function(e){
    // do some thing
})

我们引入 jQuery 的情况下，就简单了许多：

$('#myDom').click(function(){
    // do some thing
})

如果在 Vue 中，既简单又清晰：

// ...
methods: {
  doSomething: function () {
    // do some thing
  }
}

如果有大量的事件绑定，没有开发工具的支撑，将有大量重复的代码需要写，想想就头疼。效率之低下可见一斑。

为了减少请求数，前端开发者通常会把大量尺寸较小、细碎的小图片合并成一张大的透明的雪碧图，在 CSS 中通过设置元素的 background-position 来使用图片。如果是完全手动去拼图、测距，将耗费大量的时间。但在雪碧图插件 webpack-spriteSmith 的帮助下，小图可以自动拼成雪碧图，并生成对应的 CSS 样式，插件能帮助我们处理这种毫无技术含量的体力活，效率加倍。

再举一个例子，没有前端脚手架的情况下，如果从零开发一个项目，需要花费大量的时间去初始化项目，比如安装各种 npm 包、配置各种 Webpack 的 loader、配置热加载。如果碰到环境搭建不顺利的情况，还需要花费很长时间去排查问题，单单一个项目初始化的动作就足以耗费一两天的时间。有脚手架工具的情况下，只需要简单的一个初始化命令，2 分钟的时间就可以完成项目的初始化。前端只需要聚焦到业务开发本身，效率大幅提升。

2. 降低大型项目的开发难度

首先前端工程化中提倡模块化、组件化。模块化的思想将大型项目的功能进行分解，分拆成一个个独立的模块。每个模块的开发难度直线下降。同时基于版本控制工具 Git，多个开发者可以并行开发，提升开发效率。项目在后期迭代的时候，由于每个模块相对独立，耦合性极低，一个功能的调整往往只需要修改其中的一个模块就可以，风险可控。不至于出现改动一处代码，引发全局问题的情况。

其次，前端工程化提倡用完善的流程规范和代码规范来保证大型应用的质量和可维护性。比如通过 ESlint、stylelint 对代码进行自动校验，通过评审、详细设计、开发、联调、测试、上线等每个环节的控制，确保项目的高质量和按时交付。向主分支合并代码必须经过 code review。流程规范确保了大型项目质量和可维护性的同时能够如期交付。

更易获得面试官青睐

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

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

如果想进入大公司工作，前端工程化更是需要具备的基本素质。大公司的业务往往非常复杂，而且对稳定性的要求极高。与之相对应的前端工程化程度很高，各种配套的基础建设很成熟。比如美团点评体系化的工程化方案、移动组件库 Vix、自动化测试工具 Freekite、Hybrid 功能体验的解决方案 Titans 等。想得到这些公司的青睐，候选人需要在前端工程化领域有较深的积累。

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

fouber（张云龙）曾经在自己的博文中说：

"前端是一种技术问题较少、工程问题较多的软件开发领域。”

所以前端工程化是每个现代前端人应该必备的技能。

谁需要前端工程化？

3. 初中级前端工程师

对于初级中级前端工程师来说，由于工作经验较少，技术的宽度和广度都不足，对前端工程化的认知其实也是不够的，一上来整体掌握前端工程化肯定是有困难的。对于这部分同学来讲，首要的事情要学会去"用”，循序渐进地去了解其中的原理。例如在开发之余，自己学一学如何实现一个简单的脚手架工具，了解一下日常开发必备的脚手架是如何实现的，以点带面地学习里面用到的技术点。

期望晋升的前端工程师

前端工程化能力也是一个资深前端的必备技能。工作好多年了，如果连前端工程化都知之甚少，甚至连一个基本的脚手架都不能自己搭建，这是不及格的。如果将来带团队，怎么能指导团队同学，怎么能带领团队进步呢？如果去参加公司的晋升，也是没有说服力的。因为想要晋升高 T，必然需要在效率和性能优化等方面有深厚的积累和贡献。

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

前端应用越来越复杂，对前端工程化的要求越来越高。脚手架作为目前前端工程化的一个重要的组成部分，在开发过程中扮演了至关重要的角色。现在几乎所有主流前端几框架都有自己配套的脚手架，无疑给开发者带来了极大的便利。但正如上文所述，很多开发者由于本身入行较短，或者很多工作多年的开发者由于公司业务的原因，没有机会接触到前端工程化领域。

不了解没有关系，重要的是大家看到这篇教程，说明已经意识到前端工程化的重要性了，这就不晚。

笔者有一个前端工程化的实践型课程刚刚上线——《透视前端工程化》。

点击了解《透视前端工程化》。

本课程以 Vue 为例，结合笔者在团队中的工程化实践，带领大家从零开始搭建一个脚手架，将搭建脚手架用到的技术点逐一拆解，希望大家看完后，每个人都对脚手架和工程化思想有个较深入地理解。

课程目录

开篇词：到底什么是前端工程化

第一部分：模板设计

第01课：模板功能设计
第02课：Webpack 基本介绍
第03课：搭建项目模板框架
第04课：前端模块化解决方案
第05课：搭建本地开发环境
第06课：搭建本地 Mock 服务
第07课：引入代码检查工具
第08课：自动生成雪碧图
第09课：根据浏览器构建
第10课：根据环境构建
第11课：集成移动端调试工具
第12课：引入单元测试
第13课：引入 e2e 测试
第14课：Webpack 构建性能优化
第15课：添加部署功能
第16课：聚合项目配置并模板化

第二部分：命令行设计

第17课：cli 功能设计（上）
第18课：cli 功能设计（下）

结语：开放的心态才是更高阶的工程化

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

• 对前端工程化有一个系统认知；
• 能独立设计一套前端工程化解决方案；
• 知识广度上有大幅提升；
• 进入更好的平台，获得更好的薪酬。

感兴趣的话，还望大家多多支持！

最后

希望大家都能理解脚手架背后蕴藏的工程化思想，并且可以亲手完成一个脚手架的搭建。也希望大家在理解了前端工程化思想后，探索更多的方法，赋能自己的团队，共同推动前端工程化的发展。

点击了解《透视前端工程化》。

---

作者简介：

王超，现任快狗打车（原58速运）前端负责人。

先后任职于人人网、奇虎360，8 年知名互联网工作经验。

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