什么是构建工具
企业级项目可能会具备哪些功能？
- typescript: 如果遇到ts文件我们需要使用tsc将typescript代码转换为js代码
- React/Vue: 使用react-compiler/vue-complier, 将我们写的jsx文件或者vue文件转换为对应的render函数
- less/sass/postcss: 我们又需要安装less-loader, sass-loader等一系列编译工具
- 语法降级: 使用babel将es的新语法转换旧版浏览器可以接受的语法
- 体积优化: 使用uglifyjs将我们的代码进行压缩变成体积更小性能更高的文件（terser）
- .....
浏览器只认识html, css, js，若我们改一点代码就手动执行一遍上述转换过程就会非常麻烦
有工具已经帮我们把tsc, react-compiler, less, babel, uglifyjs全部集成到一起，我们写的代码发生变化就挨个走一遍转换成浏览器识别的代码，这就是构建工具，
注意：构建工具是运行在服务端的
**打包：**将我们写的浏览器不认识的代码交给构建工具进行编译处理的过程就叫做打包, 打包完成以后会给我们一些浏览器可以认识的文件
一个构建工具到底承担了哪些脏活累活:
- 模块化开发支持: 支持直接从node_modules里引入代码 + 多种模块化支持
- 处理代码兼容性: 比如babel语法降级, less,ts 语法转换(不是构建工具做的, 构建工具将这些语法对应的处理工具集成进来自动化处理)
- 提高项目性能: 压缩文件, 代码分割
- 优化开发体验:
- 构建工具会帮你自动监听文件的变化, 当文件变化以后自动帮你调用对应的集成工具进行重新打包, 然后再浏览器重新运行（整个过程叫做热更新, hot replacement）
- 开发服务器: 跨域的问题, 用react-cli create-react-app vue-cli解决跨域的问题
构建工具让我们可以不用关心我们的代码在浏览器如何运行, 我们只需要首次给构建工具提供一个配置文件(没有走默认), 有了这个集成的配置文件以后, 我们就可以在下次需要更新的时候调用一次对应的命令就好了, 如果我们再结合热更新, 我们就更加不需要管任何东西, 这就是构建工具去做的事
市面上主流的构建工具:
- webpack
- vite
- parcel
- esbuild
- rollup
- grunt
- gulp