前端工程化-什么是构建工具

了解构建工具之前，我们首先要知道的是浏览器只认识html、css、js，而我们开发时用的vue，react框架都只是为了方便我们开发而使用的工具

使用构建工具的原因

vue或react的企业级项目里都会具备这些功能：

1.使用typescript语言：如果我们遇到ts文件我们需要使用tsc命令将typescript代码转换为js代码

2.使用react/vue:安装react-complier/vue-complier,将我们写的jsx文件或者.vue文件转换为render函数将他们转换为html、js、css

3.使用less/sass/postcss/component-style:我们又需要安装less-loader,sass-loader等一系列编译工具将他们转换为css

4.语法降级：babel-->将es5以上的新语法转换为低版本浏览器可以接受的js语法。

5.体积优化：uglifyjs ---> 将我们的代码进行压缩变成体积更小性能更高的文件

6.······

这些所有的功能在每次修改项目时都必须全部执行一遍

例如在React项目修改了App.tsx文件的内容，在编译运行到浏览器上之前，我们需要将该文件做如下的处理：

App.tsx（使用了TypeScript语言）--> 使用tsc（处理TypeScript） --> App.jsx（先转变为JavaScript语言) === App.jsx（React文件）--> React-complier（处理.jsx文件) -->js文件（直到拿到js文件）

如果没有一款帮助我们自动处理这些重复性工作的工具，是不是我们开发起来也非常麻烦呢，于是这些工具就诞生了

这个工具能够帮你把tsc,vue-complier,react-complier,less-loader,babel,uglifyjs等全部集成在一起。这样我们只需要关心我们写的代码就好了！！！一旦我们修改了某文件代码--->工具就会帮自动去调用tsc, react-compiler, less, babel, uglifyjs等其他工具并执行 --->最终直接生成浏览器能够渲染执行的html、css、 js文件。

而这个工具就叫做构建工具。

生成浏览器能够渲染执行的html、css、 js文件的过程就叫做打包.

构建工具主要干了些什么

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

import vue from 'vue'; //浏览器并不认识这样的文件引入方式，它只认识绝对路径和相对路径的引入方式。所以这里构建工具就需要对他进行处理。将'vue'转变为'./vue'等等。

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

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

4.优化开发体验：

构建工具会帮你自动监听文件的变化，当文件变化以后会自动帮你调用对应的集成工具进行重新打包，然后再浏览器重新运行（整个过程叫做热更新，hot replacement）

开发服务器：跨域的问题，用react-cli,create-react-element,vue-cli解决跨域的问题

每次改一点 ---> 这个顺序还不能错

构建工具它让我们可以不用每次都关心我们的代码再浏览器如何运行，我们只需要首次给构建工具提供一个配置文件（这个配置文件也不是必须的，如果你不给他，他会有默认的帮你去处理），有了这个集成的配置文件以后，我们就可以在下次需要更新的时候调用一次对应的命令就好了，如果我们再结合热更新, 我们就更加不需要管任何东西, 这就是构建工具去做的东西, 他让我们不用关心生产的代码也不用关心代码如何在浏览器运行, 只需要关心我们的开发怎么写的爽怎么写就好了