前端开发过成中，离不开浏览器。浏览器只识别企业级项目的组成html、css、 js三种类型的文件。
为什么需要构建工具？
一个企业级项目至少需要实现以下内容：
- typescript: 如果遇到ts文件我们需要使用tsc将typescript代码转换为js代码
- React/Vue: 安装react-compiler / vue-complier, 将我们写的jsx文件或者.vue文件转换为render函数
- less/sass/postcss/component-style: 我们又需要安装less-loader, sass-loader等一系列编译工具
- 语法降级: babel ---> 将es的新语法转换旧版浏览器可以接受的语法
- 体积优化: uglifyjs ---> 将我们的代码进行压缩变成体积更小性能更高的文件
- .....
开发过程中，我们稍微修改一点东西，都需要进行很多额外的编译，如
将App.tsx ---> tsc ---> App.jsx ---> React-complier ---> js文件
有一个东西能够帮你把tsc, react-compiler, less, babel, uglifyjs全部集成到一起，我们只需要关心我们写的代码就好了 ，我们写的代码一变化，这个工具会帮我们进行一系列代码编译，最终得到我们需要的js文件。这个东西就叫做构建工具。
构建工具的功能
构建工具的优点：他让我们不用关心生产的代码也不用关心代码如何在浏览器运行, 只需要关心我们的开发怎么写的爽怎么写就好了
构建工具最重要的功能就是打包，打包是将我们写的浏览器不认识的代码 交给构建工具进行编译处理的过程就叫做打包, 打包完成以后会给我们一个浏览器可以认识的文件。
一个构建工具他到底承担了哪些脏活累活:
- 模块化开发支持: 支持直接从node_modules里引入代码 + 多种模块化支持
- 处理代码兼容性: 比如babel语法降级, less,ts 语法转换(不是构建工具做的, 构建工具将这些语法对应的处理工具集成进来自动化处理)
- 提高项目性能: 压缩文件, **代码分割**
- 优化开发体验:
- 构建工具会帮你自动监听文件的变化，当文件变化以后自动帮你调用对应的集成工具进行重新打包， 然后再浏览器重新运行（整个过程叫做热更新，hot replacement）
- 开发服务器: 跨域的问题，用react-cli create-react-element vue-cli 解决跨域的问题,。
主流的构建工具有哪些？
- webpack - vite - parcel - esbuild - rollup - grunt - gulp
vite和vite脚手架的关系
vite官网：https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project
vite的官方安装教程如下：
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
安装create vite脚手架
npm create vite@latest yarn create vite pnpm create vite
根据脚手架搭建项目
# npm 6.x npm create vite@latest my-vue-app --template vue # npm 7+, extra double-dash is needed: npm create vite@latest my-vue-app -- --template vue # yarn yarn create vite my-vue-app --template vue # pnpm pnpm create vite my-vue-app --template vue
create-vite和vite的关系
根据上面的实例，我们可以知道，使用vite创建项目过程中，我们先安装了create-vite脚手架，然后使用了脚手架创建项目。可见，create-vite内置了vite。
如果我们自己搭建一个项目，至少需要下载以下依赖
vite, vue, post-css, less, babel....
create-vite给我们预设了一套模板，模板内置了vite, vue, post-css, less, babel等等依赖, 并且做好了最佳实践的配置
create-vite与vite的关系同vue-cli和webpck的关系。只是，create-vite与vite都是vue团队开发的。
