构建工具承担了哪些工作？

前提：浏览器只认识html、css、js

在实际项目中，一般都会具备如下功能：

1、TypeScript

2、Vue/React

3、less/scss

4、语法降级：babel

5、体积优化：UglifyJS

.....

这些文件浏览器是无法直接识别的，需要通过编译或转换成浏览器认识的样子

1、ts：如果遇到ts文件需要使用tsc将ts转换成js代码

2、vue/react：安装vue-complier / react-complier，项目中的.vue文件或者react项目中的jsx文件转换成render函数

3、less或scss需要安装less-loader或scss-loader等编译工具

4、语法降级：babe将es的新语法转换成旧版浏览器可以接受的语法

5、体积优化：UglifyJS将代码进行压缩变成体积更小性能更高的文件

这些东西都需要我们手动运行，每次我们对文件进行修改保存后想要预览最新的效果，都需要重新将上面的文件全都手运行编译一遍，非常麻烦。这个时候就需要一个构建工具帮我们承担这些工作，将tec、vue-complier、less、babel、UglifyJS全都集成到一起，构建工具替我们完成，只要代码一发生变化，构建工具就会帮我们自动去编译或转换这些文件，开发者只需要关注代码即可。

构建工具承担了哪些工作？

1、直接从node_modules里引入代码、多种模块化支持(esmodule、commonjs)
终端 npm i loadsh，在html文件内直接引入loadsh会报错，因为浏览器无法识别node_modules

上面的是esmodules，使用commonjs多模块直接引入也是无法识别的


我们可以通过构建工具来进行依赖预构建，从而解决该问题。
vite依赖预构建 (点击直达👈)

2、处理代码兼容性：babel语法降级、less/ts语法转换，需要注意的是，代码的兼容性不是构建工具完成的，而是构建工具将这些语法对应的处理工具集成来自动处理）

3、提高项目性能：压缩文件，代码分割

4、优化开发体验：

• 构建工具会帮你自动监听文件的变化，当文件变化以后自动帮你调用对应的集成工具进行重新打包，然后在浏览器重新运行（热更新）
• 开发服务器：跨域问题，使用代理来解决跨域问题。

打包：将浏览器不认识的代码交给构建工具进行编译处理的过程叫做打包，打包完成后会返回给浏览器一个可认识的文件

构建工具可以让我们不用每次关心代码在浏览器如何运行，只需要给构建工具提供一个配置文件(该配置文件不是必须的，构建工具默认帮你配置好了)，有了这个集成的配置文件以后，我们就可以在下次需要更新的时候调用一次对应的命令即可，再结合热更新，构建工具会帮我们自动处理这些编译和转换问题，开发者只需要关注代码本身的编写即可。