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

前端工程化是今世前端的必备技能

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. 极大提拔开发服从

前端工程化的演进可以极大地提拔开发服从。前端发展到现在，社区涌现出大量的良好框架和工具，得以将前端工程师从繁重的工作中摆脱出来。

如果有大量的事故绑定，却没有开发工具的支持，将有大量重复的代码必要写，想想就头疼，其服从之低可见一斑。

2. 低沉大型项目标开发难度

起首前端工程化中提倡模块化、组件化。

模块化的头脑将大型项目标功能举行分解，分拆成一个个独立的模块。每个模块的开发难度直线降落。同时基于版本控制工具 Git，多个开发者可以并行开发，提拔开发服从。项目在后期迭代的时间，由于每个模块相对独立，耦合性极低，一个功能的调解通常只必要修改此中的一个模块就可以，风险可控。不至于出现改动一处代码，引发全局标题的环境。

其次，前端工程化提倡用美满的流程规范和代码规范来包管大型应用的质量和可维护性。

比如通过 ESlint、stylelint 对代码举行主动校验，通过评审、详细操持、开发、联调、测试、上线等每个环节的控制，确保项目标高质量和按时交付。向主分支归并代码必须颠末 code review。流程规范确保了大型项目质量和可维护性的同时可以大概准期交付。

以是，应用前端工程化的项目，通常可以大概更好地规避风险，分散流程压力，低沉开发难度。

3. 更易得到口试官青睐
   前端的岗位技能已经发生深刻的厘革。有人以致戏言成前端工程师为前端设置工程师。

“前端是一种技能标题较少、工程标题较多的软件开发范畴。”

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

而本日碰到的口试题大概是这种风格：“能讲下 Vue 实现双向数据绑定的原理吗？”，“Webpack 中怎样设置 Babel？”，“promise 和 await/async 的区别是什么？”

口试标题关注的条理已经有了很大差别。

如果想进入大公司工作，前端工程化更是必要具备的根本素质。大公司的业务通常非常复杂，而且对稳固性的要求极高。与之相对应的前端工程化水平很高，各种配套的底子建立很成熟。

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

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