构建工具 #

一般项目内需要的功能

• typescript：ts 文件需要使用 tsc 将 typescript 代码转换为 js 代码
• React/Vue：安装 react-compiler/vue-compiler ，将 jsx 或 vue 文件转换为 render 函数
• less/sass/postcss/component-style：安装 less-loader, sass-loader 等一系列编译工具
• 语法降级：babel ---> 将 es 的新语法转换旧版浏览器接受的语法
• 体积优化：uglify ---> 将代码压缩编程体积更小性能更高的文件

有一个东西可以将 tsc, react-compiler, less, babel, uglify 集成到一起，开发者只需要关心代码即可

打包：将我们写的浏览器不认识的代码，交给构建工具进行便已处理的过程叫做打包，打包后的产物可以让浏览器可识别的文件

构建工具具体做了什么：

1. 模块化开发支持：支持从 node_modules 里引入代码 + 多种模块化支持
2. 处理代码兼容性：如 babel 语法降级，less, ts 语法转换(不是构建工具做的，构建工具将这些语法对应的工具集成后自动化处理)
3. 提高项目性能：压缩文件，代码分割
4. 优化开发体验：
   • 构建工具会帮你自动监听文件的变化，当文件变化后自动伴你调动对应的集成工具进行重新打包，然后在浏览器重新运行（热更新）
   • 开发服务器：跨域问题，用 react-cli vue-cli 解决跨域问题

总结：构建工具让我们可以不用每次都关心代码在浏览器如何运行，开发者只需要给构建工具提供配置文件(非必须，工具有默认配置) ，有了这个集成的配置文件以后，开发者需要在需要更新时调用一次对应的命令即可，再结合热更新开发者即可不需要管开发外的其他工作

一句话总结：构建工具让开发者无需关心生产代码及代码如何在浏览器中运行，只需要关系开发即可

市场上主流的构建工具

• Webpack
• Rollup
• Vite
• Parcel
• ESbuild
• Grunt
• Gulp