共计 1150 个字符，预计需要花费 3 分钟才能阅读完成。
前提：浏览器只意识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、优化开发体验：
- 构建工具会帮你主动监听文件的变动，当文件变动当前主动帮你调用对应的集成工具进行从新打包，而后在浏览器从新运行（热更新）
- 开发服务器：跨域问题，应用代理来解决跨域问题。
打包：将浏览器不意识的代码交给构建工具进行编译解决的过程叫做打包，打包实现后会返回给浏览器一个可意识的文件
构建工具能够让咱们不必每次关怀代码在浏览器如何运行，只须要给构建工具提供一个配置文件(该配置文件不是必须的，构建工具默认帮你配置好了)，有了这个集成的配置文件当前，咱们就能够在下次须要更新的时候调用一次对应的命令即可，再联合热更新，构建工具会帮咱们主动解决这些编译和转换问题，开发者只须要关注代码自身的编写即可。