什么是前端工程化？

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

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
  }
}

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