前端工程化详解——理解与实践前端工程化

前言：
前端工程化一直是一个老生常谈的问题，不管是面试还是我们在公司做基建都会经常提到前端工程化，那么为什么经常会说到前端工程化，并没有听过后端工程化、Java工程化或者Python工程化呢？我们理解的前端工程化是不是一直都是Webpack的性能调优，或者是一个cli工具呢？今天我们带着问题来一起寻找一下答案吧！

一、前端工程化简介

我们整天再说前端工程化，那我我们思考一下，为什么会有前端工程化这个
概念？我们来一起回顾前端的发展历史，通过这个发展历史我们就能知道为什么会有【前端工程化】这个概念。

1. 前端发展历史

看下面流程图我们可以看出来
第一阶段：前端最早期的只是HTML、CSS、JS(此时只是前端发展的一个雏形，【JS】还没有模块化的概念)，随着页面发展我们发现一个页面引入太多JS脚本，将大大增加维护成本；
第二阶段：已经出现了模块的概念，会按照模块的概念进行拆分，我们如何拆分模块，如何放置这些模块？此时已经有了一个工程化的概念；
第三个阶段：模块已经划分出来，但是我们部署的时候还是想合并在一起，就涉及到了早起的打包处理；
第四个阶段：前端进一步复杂之后，前端需要承载的功能更多了，逐步开始进行前后端分离，前端也可以独立的开发了。此时前端也出来了一些新的概念，比如说：SPA、Angular、Vue等。此时就要开始考虑路由如何规划？开发时如何调试？开发完如何构建？构建完如何发布？这一切的东西才构成了【前端工程化的概念】；

综上所述我们可以看出来，前端工程化绝不只是webpack或babel构建这一块，前端工程化是一个整体，从前端开始写代码 --> 如何构建 --> 如何发布测试 --> 如何上线 --> 上线后的应用状态如何监控等，这一套的流程我们把他叫做【前端工程化】。

二、工程化整体流程

**下图所示，就是我们从零开始整个前端工程化的考虑范围**
1. 从创建项目与开发阶段--> 我们要使用脚手架，对应的Eslint规范以及我们要使用什么UI组件库
2. CI --> 持续集成： 在一个集中的环境去构建我们的项目(避免不同协作人员环境不同带来的Bug)
3. CD --> 持续部署
下面面试题 【前端项目应该如何部署上线】 会对 CI/CD做详细的介绍