typescript
: 如果遇到ts文件我们需要tsc 将typescript代码转换为js代码React/ vue
:安装react-compiler / vue-compiler, 将我们写的jsx文件或者vue文件转换为render函数less / sass / postcss/ component-style
: 我们有需要安装sass-loader / less-loader / postcss-loader / component-style-loader等一系列的编译工具语法降级
: babel ====> 将es的新语法转换为旧版本浏览器可以识别的语法体积优化
: uglifyjs ====> 将我们的代码进行压缩变成体积更小性能更高的文件稍微修改一点东西,就需要重新走一边流程, 非常的麻烦
将APP.tsx
=>tsc
=> App.jsx
=> React-compiler
=> js文件
如果有一个东西 能够把 tsc react-compiler ,less, babel uglifyjs
全部集成
在一起
我们写的代码一旦发生变化, 就有人帮我们自动取tsc,react-compiler,less,babel,uglifyjs全部挨个走一遍, 然后返会js文件
构建工具他让我们可以不用每次都关心我们的代码在浏览器是如何运行的,我们只需要给构建工具提供一个配置文件(这 个配置文件也不是必须的,如果不给他,他会有默认的帮我们去处理),
有了这个集成的配置文件之后,我们就可以在下次需要更新的时候调用一次对应的命令就好了,如果我们再结合热更新, 我们就更加不需要管任何东西,这就是构建工具去做的东西.
他让我们不用关心生产的代码是如何在浏览器运行的,只需要关注我们的开发如何舒服怎么来就ok 这个东西就是构建工具