一、脚手架概述
说实话，我刚入行那会儿，前端项目初始化全靠手撸。新建一个文件夹，手动创建 index.html、style.css、app.js，然后一个个引入。那时候团队就三个人，项目也小，这么搞还行。
但后来我去了家大厂，项目一多，问题就来了。每次新开项目，光配置 webpack 就要花半天。更别提还要统一 ESLint 规则、Git 提交规范、目录结构……每个人搭出来的项目都不一样，代码风格五花八门。
这时候，脚手架就成了刚需。
什么是前端脚手架
脚手架，说白了就是一个「项目生成器」。你给它一个模板，它帮你把整个项目的骨架搭好。你只需要回答几个问题，比如「用 Vue 还是 React？」「要不要 TypeScript？」「路由用哪种模式？」——然后啪的一下，一个可运行的项目就出来了。
我习惯把脚手架理解成「乐高说明书」。它不替你搭积木，但告诉你每块积木该放哪。你照着做，就能搭出一个标准化的房子。
核心价值：脚手架解决的不是「能不能写代码」的问题，而是「能不能高效、规范地开始写代码」的问题。
脚手架到底解决了什么问题
我总结了一下，脚手架主要干了四件事：
- 消除重复劳动——每次新建项目，不用再配 webpack、babel、postcss 这些了。你想想看，这些配置写过一次就够了，何必每次都重来？
- 统一团队规范——我在项目中遇到过最头疼的事，就是不同同事的项目结构完全不一样。有人用 src 目录，有人用 app 目录。有人用驼峰命名，有人用下划线。脚手架一出，大家都按同一套模板来，代码 review 都轻松了。
- 降低入门门槛——新手不用关心 webpack 怎么配，直接 npm create 就能跑起来。等他们熟悉了项目结构，再慢慢学底层配置，这样更合理。
- 内置最佳实践——比如路由懒加载、代码分割、Tree Shaking 这些优化，脚手架默认就帮你配好了。你不需要成为 webpack 专家，也能做出性能不错的项目。
我的经验：我曾经在一个老项目里手动升级 webpack 3 到 5，折腾了整整一周。后来我学乖了，所有新项目都用脚手架生成，升级时直接换模板，省心多了。
业界主流脚手架对比
现在市面上主流的脚手架，我基本都用过。咱们来逐个聊聊。
| 特性 | Vue CLI | Create React App | Vite |
|---|---|---|---|
| 构建工具 | Webpack | Webpack | Rollup / esbuild |
| 启动速度 | 中等（需编译全部模块） | 中等（需编译全部模块） | 极快（按需编译） |
| 配置复杂度 | 低（可视化配置） | 低（零配置） | 低（零配置） |
| 可定制性 | 高（插件系统丰富） | 低（eject 后不可逆） | 高（插件系统灵活） |
| 生态成熟度 | 高（Vue 官方维护） | 高（React 官方维护） | 中（但增长极快） |
| 适用场景 | Vue 项目 | React 项目 | Vue / React / Svelte 等 |
Vue CLI
Vue CLI 是我最早接触的脚手架之一。它的最大亮点是「可视化配置」——你可以在浏览器里勾选需要的功能，比如 Router、Vuex、CSS 预处理器，然后它自动生成对应的代码。
我记得有一次，团队要统一所有 Vue 项目的目录结构。我用 Vue CLI 的 preset 功能，写了一个自定义模板，里面包含了公司内部的组件规范、API 封装、权限校验逻辑。之后新项目直接 vue create --preset my-preset，三分钟搞定。
不过 Vue CLI 也有个问题：它基于 Webpack，启动速度确实慢。尤其是项目大了以后，每次保存都要等好几秒才能看到热更新。嗯，这也是后来 Vite 能火起来的原因之一。
Create React App
CRA 的口号是「零配置」。你不需要懂 Webpack，不需要懂 Babel，甚至不需要懂 React 的构建流程。你只需要 npx create-react-app my-app，然后就能开始写组件了。
这个设计理念我很欣赏。但实际用下来，你会发现「零配置」是把双刃剑。当你需要自定义 Webpack 配置时，CRA 只给了你两条路：要么用 react-app-rewired 这种第三方库去覆盖配置，要么直接 eject——但 eject 之后，你就再也回不去了，所有配置都暴露给你，升级也变得很麻烦。
避坑指南：我曾经在一个 CRA 项目里 eject 了，结果后来 CRA 出了新版本，我想升级却不敢动——因为 eject 后的配置是我手动改过的，和官方版本已经不一样了。那感觉，就像自己改了一把锁的钥匙，结果原厂配的新钥匙打不开了。
Vite
Vite 是近几年最让我兴奋的工具。它的核心思路是「开发时用 esbuild 做预构建，生产时用 Rollup 做打包」。说白了，就是开发时只编译你当前正在编辑的文件，其他文件直接走原生 ES Module。
我第一次用 Vite 的时候，被它的启动速度惊到了。一个 Vue 项目，从输入命令到页面加载完成，不到两秒。而同样的项目用 Vue CLI，至少要等 5-8 秒。你想想看，一天下来光等启动就能省出十几分钟。
Vite 的脚手架也做得很好。它支持 Vue、React、Svelte、Lit 等多种框架，而且模板非常轻量。不像 CRA 那样塞了一堆你可能用不到的依赖。
不过 Vite 也不是完美的。它的插件生态还在成长中，有些老牌的 Webpack 插件（比如某些图片压缩插件）还没有对应的 Vite 版本。但说实话，这个问题正在快速改善。
我的建议：如果你现在要开一个新项目，我个人会优先选 Vite。除非你的项目依赖了某些只有 Webpack 才能搞定的特殊配置，否则 Vite 的体验要好得多。
小结
聊了这么多，其实就一句话：脚手架不是银弹，但它能帮你省掉 80% 的重复劳动。选哪个脚手架，取决于你的技术栈、团队规模、以及对定制化的需求。
下一章，我会带你手写一个迷你脚手架，看看它背后的原理到底是什么。你会发现，其实脚手架没那么神秘——说白了，就是「模板 + 交互 + 文件生成」这三件事。