什么是构建工具

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

1. typescript：如果遇到ts文件，需要使用tsc将代码转换成js
2. React/Vue：安装react-compiler/vue-compiler，jsx或者.vue文件转换成render函数
3. less/scss/postcss/component-style：安装less-loader/sass-loader 等一系列编译工具
4. 语法降级：babel—→ 将新语法转换成旧浏览器认识的语法
5. 体积优化：uglifyjs ——> 将代码进行压缩变成体积更小性能更高的文件

如果没有构建工具，每次改一点文件，需要全部重新编译。如何自动的进行编译运行如 App.tsx——> tsc ——> jsx ——> React-compiler ——> js文件。

将所有东西进行集成，只关心写的代码。只关注写代码，有人会自动tsc，react-compiler，less，babel，uglifyjs全部走一遍 ——> js，这就是构建工具

打包： 就是将写的浏览器不认识的代码，交给构建工具进行编译处理的工程叫做打包。打包完成会给一个浏览器认识的文件。浏览器只认识html，css，js，不认识ts什么。

构建工具承担的功能：

1. 模块化开发：直接从node_modules中引入代码 + 多种模块化支持

2. 处理代码兼容性：比如babel语法降级，less，ts语法转换（不是构建工具做的，语法对应的处理工具集成进来自动化处理）

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

4. 优化开发体验，

   1. 如果修改一个文件，重新一个一个编译，会自动监听文件的变化，会重新打包，浏览器重新运行（热更新 hot replacement）
   2. 开发服务器：跨域问题

总结

构建工具不需要我们关心代码在浏览器如何运行，只关心开发怎么写就好了。我们只需要首次给构建工具提供一个配置文件，就可以下次更新的时候，调用一次对应的命令就好。

主流的构建工具

• webpack
• vite
• parcel
• esbuild
• rollup
• grunt
• gulp