在学习 vite 之前，对构建工具再进行一个比较全面的复习，会更轻松的学习

什么是构建工具

企业级项目里都可能会具备哪些功能

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 ---> 将我们的代码进行压缩变成体积更小性能更高的文件
.....

这个东西就叫做构建工具

打包: 将我们写的浏览器不认识的代码交给构建工具进行编译处理的过程就叫做打包, 打包完成以后会给我们一个浏览器可以认识的文件

构建工具承担了哪些脏活累活

模块化开发：

支持直接从 node_modules 里引入代码 + 多种模块化支持

比如：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script type="module">
    // es module 
    import _ from "lodash";
    console.log('__', _)
  </script>



</body>

</html>

此时我直接在浏览器里面运行，他会分别报错：

错误信息说的是：引入 lodash 只能通过 / ./ ../ 这三个（相对路径、绝对路径）路径去引入，通过上面我们写的 es module 的方式引入不生效。这是为什么？因为浏览器不知道 node_modules 这个目录。所以，构建工具帮助我们支持直接从 node_modules 里面引入代码

那既然我们现在的最佳实践就是 node_modules, 那为什么 es 官方在我们导入非绝对路径和非相对路径的资源的时候不默认帮我们搜寻node_modules呢？

因为如果浏览器默认帮助我们去加载 node_modules 里的模块，对浏览器来说，每一个模块都会发送一个网络请求。而模块可能又依赖其他模块，然后又会发送更多的网络请求，这对性能是极大的消耗。这就是为什么浏览器不帮助我们默认搜索 node_modules 的根本原因

同样的道理，如果我是想通过 commonJs 引入代码（也就是支持多种模块化）

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script type="module">
    // 多种模块化支持，比如 commonjs
    const lodash = require("lodash");
    console.log('lodash', lodash)
  </script>

</body>

</html>

直接运行在浏览器，同样报错：

所以，构建工具可以帮助我们从 node_modules 引入代码 + 多种模块化支持

处理代码兼容性

比如 babel 对 JS 进行降级处理，将最近的语法（比如箭头函数）转换成浏览器能够识别的代码。当然还有 less、ts 编译（不是构建工具做的, 构建工具将这些语法对应的处理工具集成进来自动化处理）

提高项目性能

比如：压缩文件、代码分割等等

优化开发体验

比如当我们修改了某个页面的代码后，如果没有构建工具的帮忙，你需要手动的重新调用运行命令。

比如你重新编写了一个 ts 文件，那你需要自己手动调用 tsc xx.ts 才能运行最新的。

而构建工具会帮你自动监听文件的变化, 当文件变化以后自动帮你调用对应的集成工具进行重新打包, 然后再浏览器重新运行（整个过程叫做热更新, hot replacement)

当然还有解决跨域，用react-cli create-react-element vue-cli 等解决跨域的问题

市场上主流的构建工具

市面上主流的构建工具有哪些:

webpack
vite
parcel
esbuild
rollup
grunt
gulp

而我们，将会开启 vite 的学习之旅

Vite 学习笔记（一）：构建工具基本概念