什么是构建工具

​ 首先我们需要清楚，在企业级开发的项目中，会用到很多的技术，来优化我们的开发体验和提升我们的开发效率，然后这些技术浏览器并不认识，浏览器自始至终他就只认识==HTML== ==Css== ==JavaScript== 即便时代发展，各种前端技术层出不穷，你都需要将他们转换成浏览器认识的格式，如果你开发出来的东西，浏览器并不认识，那么你做的产品的价值在哪里？简单来说，实际开发中我们可能会需要：

  1. TypeScript，遇到ts文件，我们需要将ts文件转换成js文件
  2. Vue/React，遇到vue/jsx文件，我们需要用vue compiler/react compiler，将我们的vue文件转换成render函数
  3. less/sass，我们还需要less-loader，sass-loader等编译我们的css文件
  4. babel，我们还需要使用babel将我们写的较新的js代码转换成浏览器认识的js代码，兼容更多的浏览器
  5. 等等

当我们稍微改动一点点东西，那么我们就需要对vue文件进行编译，sass语法的css进行编译，然后再用babel对js进行编译等等，而且这套流程是不会变的，也不能变的，比如说你有一个App.tsx，你需要先把他转换成App.jsx 然后在编译成js文件，一个某个流程出错，可能会导致编译的异常，所以这套固定的流程我们希望有个人能帮我们做，我们可能会出错，但是程序是不会错的，他会按部就班的按照既定流程执行代码，而我们只需要关心我们写的代码就好了，我们写的代码一旦发生变化，他就按照配置去从头到尾挨个走一边，这个东西就是构建工具。

构建工具在开发中做了些什么

  1. 模块化代码的支持：支持从node_module中引入代码以及多种模块化方案的支持

    1
    2
    3
    // 我们在开发中经常会写出以下代码
    import axios from 'axios'
    // 这种代码浏览器是并不认识的，虽然浏览器目前已经支持ES Module，但是他需要你导入的是以路径开头的文件，它会根据这个路径去找个这个文件

  2. 提高代码兼容性：构建工具会内置很多的处理工具，比如说babel、sass-loader、postcss等等，对代码进行一个转换

  3. 提高项目性能：压缩代码

  4. 优化开发体验：

    • 整个构建工具会监听项目文件的变化，当项目文件发生变化的时候，会自动化调用对应的处理工具执行整个代码编译的流程，
    • 开发服务器：跨域的问题，通过内置服务器解决跨域的问题

总结

​ 构建工具就是可以让我们在开发阶段，按照最适合自己的开发习惯、开发流程去搭建整个项目，而不用去担心我用的xx语法在浏览器不兼容怎么办，他已经帮我们做了对应的处理，他处理不了的也已经集成了能处理的工具进来帮我们进行处理，我们只需要给到一个配置文件，后续他会严格按照这个配置文件对我们的项目进行打包编译。