仔细研究下前端工程化中常说的 “构建工具”/“编译工具”/“打包工具” 分别到底是什么？他们的职责边界在哪里？
构建工具
什么是构建工具?
首先这个概念是跟着前端工程化的脚步慢慢成熟的。我理解着是一个:能帮助整个团队在开发中能精简流程、提高效率、减少错误、并能实现自动化部署的工具。它能使开发中更专注的卷在业务逻辑里的工具！
所以这里的构建工具需要包含哪些功能呢？
- 项目创建
- 项目文件编译测试
- 便于本地开发调试(热更新)
- 优化项目代码结构
- 项目部署
有哪些构建工具？
目前个人认为:gulp,Grunt,vite 这种才能算构建工具.
因为构建一词是针对与项目整体而言的，理论上它应该包括项目的全生命周期,而不是某一个细节。
编译工具
什么是编译工具?
所谓编译工具个人认为可以等同于编译器, 一种语言（通常为高级语言）”翻译为“另一种语言（通常为低级语言）”的程序。因此这里强调的是一种翻译能力
有哪些编译工具?
babel、SWC(Rust-based platform for the Web)
打包工具
什么是打包工具
在对构建工具和编译工具做了定义之后,那么打包工具就很好区分了。 打包即文件 N->1 或者 N->N
有哪些打包工具
webpack、esbuild、rollup、parcel 等。虽然 webpack 能支持引入各种 loader 似乎有一定编译能力。但个人认为在 webpack 的世界里 loader 只是作为打包路径上的一个小步骤并不是它自己的核心功能。