最近辅导一些新人小伙伴，发现大家对脚手架、框架、构建工具这三个概念还是容易混淆。

有人搭项目的时候说"我用的是Vite框架",有人说"Next.js是个构建工具",还有人问"Vue CLI和Vite有啥区别,它们不都是Vue吗?"。

反正就挺乱的。正好趁这个机会,我自己也理一理思路。

其实我刚开始做项目的时候也很懵。

比如看到package.json里既有React又有Webpack,还有个@babel/preset-react,

当时就不明白为什么要装这么多东西,它们各管什么。

更头疼的是有些项目用 webpack.config.js,有些用vite.config.js,

有些项目根目录还有个scripts文件夹专门放构建脚本。

那会儿改配置基本靠猜,报错了就到处查,也不知道该从哪个配置文件下手。后来慢慢踩坑多了才理清楚。

先说框架吧

框架这个最好理解。Vue、React、Angular这些就是框架(严格来说React是库,但这里就不纠结了)。

它们是用来写应用逻辑的,比如组件怎么写、数据怎么管理、页面怎么更新之类的。

构建工具是啥

这个稍微绕一点。我们写的代码浏览器其实不能直接跑,需要"翻译"一下。

比如用了ES6的语法、用了TypeScript、写了.vue文件,这些浏览器都不认识。

构建工具就是干这个的——把写的代码转换成浏览器能认识的代码。

Webpack、Vite、Rollup、esbuild这些都是构建工具。它们负责打包、转译、压缩、优化代码。

还有热更新、Tree Shaking这些功能也是构建工具提供的。

顺便说一句,之前Webpack确实配置起来挺麻烦的,我记得当时光配babel就能搞半天。

现在Vite出来之后,配置简单多了,开发体验也好很多。不过Webpack生态更成熟,很多老项目还是在用。

脚手架呢

脚手架是最容易被混淆的。

其实脚手架就是一个"项目初始化工具"。它帮着把项目的基础结构搭好,包括目录结构、配置文件、依赖包这些。

create-react-app、Vue CLI、create-vite这些都是脚手架。运行一条命令,就给生成一个可以直接开发的项目模板。

我自己用Vue CLI的时候就特别明显,vue create my-app一运行,项目结构、Webpack配置、Babel配置、ESLint这些全给搞定了。只需要专注写业务代码就行。

它们之间到底什么关系

说白了就是:

脚手架帮着创建项目 → 项目里用框架写代码 → 构建工具把代码打包

举个具体的例子。假设要做一个Vue项目:

1. 先用npm create vite@latest(Vite的脚手架命令)创建项目
2. 创建的时候选择Vue模板,这样项目里就会用Vue框架
3. 项目配置文件里已经配好了Vite作为构建工具
4. 开始写Vue代码
5. 运行npm run dev的时候,Vite帮着启动开发服务器、做热更新
6. 运行npm run build的时候,Vite把代码打包成浏览器能用的文件

所以这三个东西是在不同环节发挥作用的,根本不冲突。

有些工具会跨界

不过现在很多工具其实是多功能的,这也是让人混淆的原因。

比如Vite,它既是构建工具,又提供了脚手架功能(npm create vite)。

Next.js更复杂,它既是React框架的上层封装,又内置了构建工具,还有自己的脚手架。

这种"一站式"的工具确实方便,但也容易让人搞不清到底是什么。

我之前刚接触Next.js的时候就懵过,因为它把太多东西都包进去了。后来慢慢理解了,其实就是为了让开发者少操心,开箱即用。

再说说一些容易混淆的

Babel 是转译器,不是构建工具。但构建工具会用到它。就像切菜刀不是做菜,但做菜要用刀。

npm/yarn/pnpm 是包管理工具,跟前面三个完全不是一回事。它们管的是依赖安装,就像是去超市买食材。

TypeScript 是编程语言,需要编译器(tsc)把它转成JavaScript。编译器也不等于构建工具,但构建工具里会集成TypeScript的编译。

ESLint/Prettier 是代码规范工具,跟构建没啥关系。虽然脚手架一般会帮着配好,但它们的作用是检查代码格式和质量。

为什么要分这么细

有人可能会想,搞这么复杂干嘛,能不能就一个工具搞定所有事。

其实这是Unix哲学——"一个工具只做一件事,但做到极致"。这样每个工具专注优化自己的领域,然后通过组合来完成复杂任务。

而且想想,如果Vue和Webpack强绑定,那想用Vite就用不了了。现在这样解耦的设计,可以自由选择搭配。

Vue可以配Webpack,也可以配Vite或者Rollup。

当然,对新手来说确实有学习成本。但理解了之后,会发现这种设计其实挺优雅的。

最后说两句

其实这些概念,真正用起来之后就会慢慢理解了。一开始不用纠结太细,照着文档搭个项目,跑起来能用就行。

我自己最开始也是稀里糊涂的,就知道运行npm install和npm start。后来遇到问题了,需要改配置了,才逼着自己去弄明白这些东西到底是干嘛的。

好了,就写这么多吧。希望对大家有点帮助。

🔥号外～号外～

最近我们推出了大厂的一手面经模块，都是刚面完的小伙伴们热乎乎分享的：

• 字节、阿里、腾讯最新面试真题
• 面试流程和注意事项
• 面试官的重点提问和考察点

这些面经都是花了不少心思整理的，比网上那些过时的八股文靠谱多了。

有需要的小伙伴可以点击这里👉前端面试题宝典（打开小程序，首页即可直接领取【大厂真实面经】），也可直接联系小助理咨询。

毕竟信息差就是竞争力，早点了解面试套路，早点拿到心仪offer！

有会员购买、辅导咨询的小伙伴，可以通过下面的二维码，联系我们的小助手。