什么是构建工具？
早期网页开发中，用到的技术只有 html、javascript 以及 css，也就是我们所说的结构、行为以及表现。
随着互联网以及前端技术的发展，我们开始追求规范、标准以及效率，衍生出了越多的新标准、新技术等。
这里简单列举下目前项目开发中所用到的新技术：
● ES6 - ES10
● TypeScript
● React、Vue
● Less、Sass、PostCss
● ...
对于应用这些新标准、新技术的项目而言，有些是浏览器不支持这些新的标准，有些则是浏览器压根不认识这些对应的文件。所以在项目发布前，我们需要进行如下步骤：
// 1、执行 babel xxx.js 对 ES新标准进行降级
// 2、执行 tsc xxx.ts 将 typescript 转换为 JavaScript
// 3、安装 react-compiler、 Vue-compiler，将我们写的 jsx 文件或者 .vue 文件转换为 render 函数。
// 4、安装 less-loader，sass-loader 等一系列编译工具。
可以看到，在企业级项目开发的过程中，需要承担很多与业务代码无关的工作。记得我刚入职场的时候，开发环境都得整好几天，当时就觉得很痛苦，为什么我不能直接写业务代码，而要花费精力在这些不能直接产生价值的事上。现在项目发布前，我们也要做很多与业务代码无关的工作，甚至说，我们我们每改一行代码，都可能需要重复执行上述步骤。
为了降低上述流程，提升效率，我们可能会写一个脚本，然后指定第一步、第二步所规定的事，去将上述流程给串联起来。但是这种方式并不是一种规范、标志的方式，重新搞一个项目，可能就需要重新写一个脚本。
为此，就产生了构建工具，其可以理解为一种标准化、通用化的流程工具。构建工具让我们不必关心浏览器不认识的文件/语法，如何在浏览器中运行，只需要开发人员专心于业务代码的开发。
其工作流程是，只需要首次给构建工具一个配置文件，有个这个配置文件并且配置好浏览器不认识文件/语法的解析工具后，我们只需要在下次进行更新的时候调用一次命令，就可以生成浏览器认识的文件。
构建工具有哪些？
构建工具主要有如下几个rollup、gulp、webpack 以及 vite 等。
-
Rollup：一个用于打包 JavaScript 库的工具，支持 ES6 模块规范和 Tree-shaking。它的目标是生成尽可能小、高效的代码。
-
Gulp：一种基于流（stream）的自动化构建工具，可以自动化执行重复性的任务，如文件复制、文件压缩、代码合并等。
-
Webpack：一个模块打包工具，可以将各种静态资源（如 JavaScript、CSS、图片等）视为模块来处理，并将其打包成符合生产环境部署的代码。它还支持插件机制，可以通过插件扩展其功能。
-
Vite：一个基于浏览器原生 ES 模块导入的开发服务器，主要用于前端开发。它利用浏览器原生支持的模块化能力，实现了开箱即用的快速开发体验，并且可以在生产环境下快速构建项目。
每个构建工具都有其独特的特点和优势，选择适合自己项目的构建工具是非常重要的。同时，深入理解构建工具的原理，可以帮助开发人员更好地使用和定制构建工具，从而提高项目的效率和质量。webpack 是当前使用人数最多、生态最丰富的构建工具。vite 则是号称下一代构建工具，用于解决 webpack 的不足。
本专栏旨在学习构建工具是什么、如何使用以及其原理，解决项目开发过程中可能碰到的问题。
