前端的小伙伴应该能够很明显地感觉到，在面试过程中，各大公司面试官已经非常注重前端工程化能力的考察了。

前端工程化的演进可以极大地提升开发效率。前端发展到现在，社区涌现出大量的优秀框架和工具，得以将前端工程师从繁重的工作中解脱出来。比如，同样地给一个 dom 元素绑定一个 click 事件，使用 Vue 就会比 JS 更简单清晰。

我相信每个踏入前端这个行业的同学都是有着一颗热爱学习的心。因为前端这个行业不如后端那么成熟稳定，所以一直是在高速地推陈出新，每年都会有新的框架出来。但每个人的精力又是有限的，每个人都希望投入有限的精力的情况下，能学到最有价值的东西。所以我一直在想能否将这些年前端在工程化方面的优秀成果浓缩到一个课程中。感兴趣的同学可以了解下 ?《透视前端工程化》

结合自己的经历总结了一些在前端学习上的方法，希望对大家有所帮助：

1. 夯实自己的基础能力。HTML、CSS、JS这三个前端必备的技术是必须要精通的，不能做了几年前端了连CSS布局、异步编程这些基本的东西还模糊不清。
2. 抓主要矛盾，打造核心竞争力。每个人的精力有限，我们应该挑选一个感兴趣的方向往深里去钻研。而不是企图将所有的方向都做到最好。
3. 工作中多思考总结。很多人吐槽自己一直疲于做做业务需求，没有机会做技术项目，得不到提高。其实在业务中也能做到能力的提升。在做业务的时候，完全可以将自己平时的新想法，接触到的新技术付诸实践。另外，做完项目后做一个复盘，总结自己遇到的问题和解决方案。久而久之，你会发现自己在业务中也能很好地得到成长。
4. 多与别人交流。现在互联网技术讲究开源，我们的心态更要open，应该互相学习对方的优点，内化为自己的东西，让自己得到快速提升。
5. 时刻关注社区技术动态。前端的新东西层出不穷，不一定什么东西都去学，但要掌握行业动态，知道大家都在玩什么技术，跟上行业的脚步。

---

我是谁？

我是王超，现任快狗打车（原58速运）前端负责人，从 0 到 1 组建了快狗前端团队，负责团队技术体系的搭建，形成了以 Webpack 和 Vue 为基础、 Node.js 中间层为补充的，自动化、工程化、组件化的快狗前端技术体系。

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

这次主要是想和大家聊聊从切图仔到前端 Leader，究竟是如何实现的个人成长？

联合推荐：沈剑 快狗打车CTO、王海旭 58大前端团队创始人、冯阳 58到家平台前端负责人

---

我的工作经历

时间如白驹过隙，转眼已经在前端这个行业已经七八年的光景了。非计算机专业出身的我从事前端这个行业，确实经历了很多的挫折，走了很多弯路。

但现在回首自己的职业经历，每一份经历都有不一样的收获。

毕业生，第一份工作千万不能选错

我毕业后第一份工作是在一家广告联盟公司做 flash 广告设计和平面设计。当初选择这份工作自己根本就没经过仔细的考虑。

由于公司很小，在 flash 开发设计这个岗位上就我一个人，身边没有有经验的人可以学习。随着 Web2.0 时代的到来，Flash 技术也在走下坡路了，我的 flash 之路是条死路。

后来公司来了一个做前端的同事，工作中与之不断交流中渐渐了解了前端开发，flash 技术未来一定会被前端的技术所取代。这才将自己的精力投入到了前端的学习上，慢慢也能做一些简单的前端工作了。

现在来看，虽然自己最终找到了一个正确的航道。但如果在选择工作的时候就经过仔细调研，能让自己少走很多弯路。

平台对新人很重要，好的平台会让新人有很好的成长起点，具备良好的视野。而且在平台众多有经验的老人的提携下，新人成长的会很快，能为以后的职业发展奠定一个良好的基础。

「人人网」时期，见证 PC Web 到 移动 Web 的跨越

当时的前端处于从 PC Web 开发向移动 Web 开发过渡的时期。在这里的两年多，无论是 PC 上的开发还是移动上的开发都做了很多，比如 PC 各种浏览器厂商的兼容问题，移动端上各种机型的适配问题，使用 CSS3 实现各种新特性。

此时前端领域正在发生快速的变化，像 Angular、React 等现代前端框架已经开始出现。而这边依旧是使用传统的原生 JS、jQuery 重复性地完成项目，自己的技术也进入了一个瓶颈期。

面对自己的技术瓶颈，我想到的是换个环境来逼迫自己跳出舒适区，突破技术瓶颈。
但是，这里我想多说一句，一定不要为了跳槽而跳槽。

跳槽之前要问自己一句，我在这里是不是已经该学的都学会了？如果答案是肯定的，那就早点行动，否则就踏踏实实地继续沉淀提高。

「360」时期，越痛苦提升越快

360 这边的技术体系很完善，前后端分离开发、前端部署平台化、上线前代码自动 diff，新技术的应用、定期的技术交流。

入职之初我做项目很吃力，因为从开发框架 Backbone、React 到构建工具 Webpack，再到开发方式使用 Linux 开发机，所有的东西都是新的，感觉哪哪都不会。

我足足用了半年的时间，直到和同事一起使用 React 重构 360 地图，才完全熟悉和适应。但让我无比痛苦的半年恰恰是自己提升最快的时候。

谈到这里我想说一下是如何一步步提升自己的。

第一是独立思考解决方案。遇到了问题我通常是自己去网上去找解决方案，实在解决不了了，再去找自己的同事和 leader 寻求帮助。

第二看比自己能力强的同事的代码。从他们的代码中，可以借鉴到很多好的设计方式和编程习惯，日积月累变成自己的东西。

第三多与同事进行技术交流。通过与他们的交流，可以很好地开阔自己的视野，弥补自己不知道的知识。这里特别感谢一下我的老朋友司望利，从他的身上学到了很多。

「快狗」的挑战，建设前端工程体系

快狗这边的早期的前端开发方式比较原始。担任快狗前端负责人后，我开始着手推进前端工程化。首先就是升级技术栈，并进行前后端分离。陆续建设了前端部署平台、组件库、脚手架、以及性能监控平台逐渐形成了完善的前端技术体系。

做为团队负责人如何从无到有搭建技术体系，这里分享一下我的经验。

新晋技术负责人从技术思维向管理思维转变。很多技术人在成为团队管理者后，还是习惯什么事情都自己搞，一方面担心别人做不好，另一方面担心自己的技术优势会慢慢丧失。别人不会做，你可以进行指导，但不能千万自己替他做，因为你的精力是有限的。另一个担心更不可取了，你虽然不再深入技术细节，但在知识的技术广度、技术视野上会有更大的提高。

技术体系建设要以解决业务痛点为目的。任何的技术工具和平台建设都不能脱离这个目的，不能仅仅为了试用一下某项技术或者好玩就去搞。否则很可能是白白浪费了研发成本，缺很难在团队中推广使用，无法产生价值。

技术体系建设要充分讨论后再实施。方案的设计讨论清楚了，才能避免将来各种问题的出现。我们在建设前端部署平台的时候就有过深刻的教训。

由于前期方案考虑不周，后期平台经历一次大的调整，使用老平台部署的项目用了半年的时间才完成迁移，成本很高。

建议将 70% 的时间用在方案设计和讨论上，30% 时间用在工具和平台的研发上。

为什么大公司现在这么重视前端工程化？

从事前端开发这个职业有七八年的时间了，既经历过工程化程度极低的开发方式，也见证了这几年前端领域工程化水平的大幅提升。导致前端工程化水平大幅提升的原因，大致有二：

一方面是由于大公司本身业务复杂，相应的前端工程化程度高，配套的基础设施很成熟，对人员的要求自然很高。

另一方面，现在的前端开发都是在一些先进的工程化工具基础之上，比如 React、Vue、Sass、Webpack 等。只有具备良好的工程化能力，才能更好地应对日益复杂的开发任务，才能更容易进入大公司。

试读 ?《透视前端工程化》

课程设计

前端工程化是个比较大的话题，涵盖的知识很多。大篇幅的讲述理论知识又是很枯燥的，而且效果不好。

所以在课程设计上，我是以动手实现一个前端脚手架工具为主线，过程中引出实现某个功能的思路和用到的工具，并一一讲解。

例如，为了把规范开发者的代码，我们在脚手架中需要引入代码检查工具eslint和stylelint，并对两者的使用进行了讲解。

又比如，在搭建本地开发环境可能有多种实现方式，比如自己单独写一个静态服务器来实现或者使用 webpack-dev-server 和 webpack-dev-middleware 进行来实现，我们着重对后者进行了详细介绍。

读者在课程结束后，不但可以系统学习了前端工程化的工具和知识，还可以完成一个实用的脚手架工具。

课程特色

实操驱动，沟通前端知识

实际操作脚手架搭建，沟通起流程规范、开发、联调、测试、构建、部署各个环节知识

实用性强，直接落地业务

课程内容基于团队的实际工程化经验，可以把课程所学直接应用到业务开发中

你能学到什么

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

最后，希望每一个前端人都能通过努力来完成自己的人生进阶道路，加油！

试读 ?《透视前端工程化》

目录

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

第一部分：模板设计

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

第二部分：命令行设计

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

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