构建工具到底是什么呢? 一篇帮你搞懂

什么是构建工具

一 . 企业级别项目都可能会具备哪些功能

1. typescript: 如果遇到ts文件我们需要tsc 将typescript代码转换为js代码
2. React/ vue :安装react-compiler / vue-compiler, 将我们写的jsx文件或者vue文件转换为render函数
3. less / sass / postcss/ component-style : 我们有需要安装sass-loader / less-loader / postcss-loader / component-style-loader等一系列的编译工具
4. 语法降级 : babel ====> 将es的新语法转换为旧版本浏览器可以识别的语法
5. 体积优化: uglifyjs ====> 将我们的代码进行压缩变成体积更小性能更高的文件
6. …

二. 引出问题

稍微修改一点东西,就需要重新走一边流程, 非常的麻烦

将APP.tsx=>tsc=> App.jsx => React-compiler => js文件

如果有一个东西 能够把 tsc react-compiler ,less, babel uglifyjs 全部集成在一起

我们写的代码一旦发生变化, 就有人帮我们自动取tsc,react-compiler,less,babel,uglifyjs全部挨个走一遍, 然后返会js文件

三. 一个构建工具干了什么:

1. 模块化开发: 支持直接从node_moudles引入代码 + 多种模块化开发

2. 处理代码兼容性: 比如babel的语法降级, less,ts 语法转换(不是构建工具做的, 是构建工具将这个语法对应的处理工具集成,然后进行自动化处理 )

3. 提高了项目性能: 压缩文件 “代码分割”

4. 优化开发体验:
   构建工具会帮你自动监听文件的变化,当文件变化之后自动帮你调用对应的集成工具重新编译打包,然后再在浏览器重新运行(整个过程叫做热更新,即hot replacement)

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

四. 总结:

构建工具他让我们可以不用每次都关心我们的代码在浏览器是如何运行的,我们只需要给构建工具提供一个配置文件(这 个配置文件也不是必须的,如果不给他,他会有默认的帮我们去处理),

有了这个集成的配置文件之后,我们就可以在下次需要更新的时候调用一次对应的命令就好了,如果我们再结合热更新, ​ 我们就更加不需要管任何东西,这就是构建工具去做的东西.

他让我们不用关心生产的代码是如何在浏览器运行的,只需要关注我们的开发如何舒服怎么来就ok ​ 这个东西就是构建工具