开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情
1、为什么需要前端工程化？
在早期的网站开发中，前端开发只是后端开发的附属，为后端开发提供一些页面模板，后端把数据加载到模版中之后，发送到浏览器渲染为页面；前后端分离的概念提出后，前端开发也只是实现一些页面效果，最多再写一写js让页面多一些交互效果，这个时期之前，前端在整个网站开发周期中所占的比重是很小的；而到现在，随着需求的不断增长，前端的业务从web应用扩展到了App，小程序以及各种终端应用，前端开发都有涉及，前端开发工作变得复杂多样，开发流程拉长，协作开发的要求更高，因此，我们需要独属于前端开发的一套流程，来处理代码冗余，项目可维护性，版本升级迭代，协作开发等问题，这就是前端工程化。
前端工程化的主要目标就是解放生产力、提高生产效率。通过制定一系列的规范，借助工具和框架解决前端开发以及前后端协作过程中的痛点和难度问题。
2、前端工程化包含哪些内容？
在我们开发项目的整个周期中所涉及到的内容，都可以算作前端工程化的一部分。
从启动项目时的项目构建工具选择，到开发时的代码规范校验，代码格式校验，ts规范，代码仓库进行版本控制，多人协作，代码提交规范等，开发完成后进行单元测试，构建发布等 ，线上版本回滚等一系列操作都是前端工程化的一部分。
1、构建工具
-
webpack
webpack是一个打包模块化JS的工具，在webpack里一切文件都是模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件。webpack专注于构建模块化项目。
-
gulp
gulp是一个基于流的自动化构建工具。除了可以管理和执行任务，还支持监听文件、读写文件。基于内存实现的，其构建速度比 Grunt 快，而且，Gulp 的生态也很完善，插件质量很高。目前最为流行。gulp被设计的非常简单，只通过下面5种方法就可以支持几乎所有构建场景
-
grunt
Grunt和Npm Script类似，也是一个任务执行者。Grunt有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系。是第一款自动化构建工具，对前端工程化的发展具有里程碑意义，其生态完善。但是，它的构建是基于临时文件的，所以构建速度较慢，现在用的人越来越少了。
-
babel
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
-
rollup
Rollup是一个和webpack很类似但专注于ES6的模块打包工具，它的亮点在于，能针对ES6源码进行Tree Shaking，以去除那些已被定义但没使用的代码并进行Scope Hoisting(作用域提升)，以减小输出文件的大小和提升运行性能。rollup的方法和webpack差不多
-
vite
vite是下一代前端开发与构建工具。^ [1]^ Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持
