小白也能听懂的前端工程化

前端工程化最近也是被不少公司或者企业都用起来了，变成了一个很火的名词，因此我就好奇一下中间的来龙去脉是怎么样的

01 前言

---

前端工程化这个方面的内容我也是近年来才听到的一个信息，我一听就以为十分地高大上，何时前端开始变成了一个工程化的层面了？不过如今随着技术的更新换代我逐渐相信前端的发展了。以前以为惊讶的时候，我仍是你们认为前端该干的事情——切图，套模板。

本文就和你们扯一下前端工程化的前世此生，没有技术在里面。你们能够带着好奇的心情阅读。

02 前端开发？切图？

其实以前对于前端的概念基本上是没有的，那时候不少招的就是后端的开发，因此java的开发就很吃香了，差很少站到了鄙视链的顶端。那为何我不去学后端呢？由于我（后）相（端）信（太）前（难）端（了）的发展。

因此没办法，我就随便找个其余的学一下，因为美工很差那就找前端吧！有点东西还能够立刻出效果。

前端历史

不得不认可的是，如今前端经历了两次的重生。才有今天日新月异的发展，第一次是从静态网站变成了动态网站；第二次就是Node.js的推出，可使脚本语言JavaScript运行在服务器端，这但是解放了生产力，让前端再也不卑微了。

不少人都以为动态网站不是很早就有了吗？一开始我也是这么以为的，毕竟写一个脚本就可让页面动起来，可是这里说的动态可不是这个意思，是能够与用户进行交互了。你们能够想一想看以前的前端历史，无非就是把几个页面模板拼凑起来，而后使用js加上几个动画，就会以为你的网站不得了了。那时候的网站基本上是没有交互的，就是给别人看的页面，仅此而已。

有时候你辛苦调试出来的一个完美的页面，发给同窗朋友看的时候，页面也可能会乱。没错，那个就是不兼容的时代，会让每个前端抓狂的时代，而如今就不同了，不少框架都帮你弄好了，不多会有兼容的问题。

开发模式

因为本人是没有经历过先后端混合的开发模式，我开始学习前端的时候，vue和elementui这些都已经出来了，因此我就跟高兴晚出生了几年，让前人们帮咱们这群人铺平了前端道路。

当我谷歌了前端工程化了以后，发现以前的开始模式是比较混乱的，也是没有很强的逻辑在里面的。大概的开发模式就是切一下图，把设计的部分作了和写一下脚本（相信你们都知道dreamweaver这个软件，既可网页设计也能写前端代码）。而后页面模板就交给后端来作，先后端混合在一块儿，耦合性很是高。这真的就是牵一发而动全身的局面。相信你们都知道大名鼎鼎的JSP了，我在大学的时候也学了这个，基本上没什么用（下一届取消这门课程）。

后来后端就忍不住了，你这前端的东西啥玩意，零碎的很，又毫无逻辑可言。

好吧，前端本着背锅的心态啃了这块骨头，把全部页面相关的东西都给了前端，后端就负责发给我数据就行了。这就是上面提到的动态网站的开始，这得益于Ajax的诞生。今后之后前端的工做就不用去切图了，你的工做就变成了怎么搞模板，设计与美化页面的工做了。

03 前端工程化

---

以前咱们开发完了页面以后，剩下的就等后端来给你数据了。可是你前端的开发快了，可是后端的接口跟不上啊，这可怎么办？聪明的前端就想出了“假数据”这个东西，就是我先把数据本身模拟出来，你后端就必须按照个人格式给我返回数据（与后端沟通好格式）。

这不，出了不少数据模拟的工具，好比easymock等。你们能够脱离后端的控制单飞了，咱们能够把这个项目同步进行开发，每个过程都是完整可交付的状态，能够随时给客户演示这个过程而不用等后端的接口。项目组一看，前端作的不错（升职加薪）。可是这和工程化的概念还很远呢，咱们知道项目大概能够分红四部分：设计，开发，测试，部署。

设计

这里的设计主要是由产品经理与UI设计一块儿，设计这款产品的愿景以及要实现的功能，简单一点就是把用户需求的功能经过产品设计出来，交给开发。

前端就主要经过产品页面的评估，主要是评估开发周期以及项目的难度，而后是技术栈的选择。后端会对系统进行架构设计，包括系统接口，权限控制，性能，可维护可复用等的设计。基本上先后端设计的都是关于技术类型的。

开发

接下来就会进行开发的状态，根据需求进行开发。这个阶段就要注意一些小功能的开发，是否能够经过全部的测试用例。不知道你们是否听过敏捷开发的技术，这是一种高效的模式，确保开发的过程当中每一个部分的功能均可以使用。他的初衷就是可以高效地开发迭代，快速地转变用户需求。前端的组件化、模块化的设计就是可以保证敏捷开发的前提。

测试

测试的做用就是进行小范围的对功能自己的验证，通常来讲会有不少测试用例，只有你经过了全部的用例测试以后就能够进行下一部的操做。测试是直接面向用户的，这时候就站在用户的角度去体验这个产品，把用户可能出现的操做都测试一遍看服务或者数据是否正常，前端工程师是主要责任人。一般可能还会包含压力测试等，用来测试产品的性能，这时候就是后端的主要责任。

部署

部署的流程就是一个很重要的一部分，假如前期的工做作得不够好，项目上线以后可能会遇到不少问题，让你难以定位问题出在哪，项目难以维护等。先后端分离的开发模式能够有效的减小故障的发生，可以快速定位问题，解决问题。其实这里也是得益于单元测试以及项目工程拆分的过程。

这里的部署能够把一些静态的文件部署到静态服务器或者CDN，把涉及数据交互的放在web服务器，作到相似“读写分离”的功能，可以最大程度提高性能。

在开发的过程当中就可使用先后端分离的开发模式，这是一种与技术无关的模式，就是一种工程思惟的考量。不少面试都会问你谈谈前端工程化的理解，其实无非就是为何有前端工程化、怎么作才能够、有什么好处等。基本上这就是一种工程的思惟，与技术的关系不大。总的来讲有如下三个优势：

• 并行开发，缩短开发周期
• 快速定位问题，迅速解决问题
• 部署能够动静分离，简化流程，提高程序的健壮性

04 小结

---

其实我发现一些书籍把前端工程化的概念讲的很深，好比可能会说前端的打包工具、持续集成等。固然这也是前端工程化的一部分，简单来讲它的核心就是“解耦”，让以前的纠结不清的脉络从新整理出来，变成一个可维护可复用的状态。

总结一下前端工程化就是为了简化开发流程，并行开发，互不影响且可以方便合并整个项目。核心目标就是创建一种开发环境，提高总体的开发效率。

做者：前端小时
连接：https://juejin.im/post/5e74b6... 来源：掘金 著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。