前端构建工具简单理解

前言

正常来说，浏览器是只识别HTML、CSS、JS文件，那我们开发React和Vue项目时的.vue、.tsx、.jsx、.scss等文件咋处理，因为这些文件浏览器压根识别不了。这时候我们可以通过现成的构建工具去帮我们做代码转化处理，使得最后得到的代码是浏览器可识别的。

介绍几款市面上常见的构建工具

1. vite
2. webpack
3. esbuild
4. rollup
5. parcel

如果没有构建工具，我们真实情况应该是咋样的

例如：

1. ts文件我们需要通过tsc去转化后才能得到js
2. sass、scss我们需要对应的loader插件去转化
3. .vue我们需要通过vue-compiler将文件内容转为render函数
4. ...

如果没有构建工具，我们可能每次修改代码我们都需要一个一个的去运行代码转化的插件，最后才能得到浏览器可识别的代码

构建工具到底做了些什么

那么，构建工具到底做了哪些工作呢

1. 首先最熟悉的肯定是.tsx和.vue文件以及sass等文件的转化
2. 支持模块化开发
3. 如果我们写了TS文件，我们也需要将ts文件转化为JS文件
4. babel的语法降级
5. 打包体积优化
6. 优化开发体验（热更新）
7. 开发时服务器的构建
8. ...

总结

构建工具就像盖房子一样，毛坯房和装修房的区别，毛坯房什么都得自己搞，装修房就是都装修好了，不需要自己去装修，可以直接入住。在代码上也是，构建工具让我们只需要关心我们开发就好了，其他的构建工具会帮我们进行打包处理，最终会给我们一个浏览器可识别的代码。