前端项目脚手架与构建管理工具对比

@angular/cli、@microsoft/rush、create-react-app 和 vue-cli 都在前端开发历史上扮演过重要角色，但它们的定位和当前状态差异巨大。有些是框架专用的构建工具，有些是仓库管理器，有些则已退出历史舞台。让我们从工程实践的角度深入对比它们。

🚨 当前维护状态：活跃 vs 弃用

在选择工具之前，了解其生命周期至关重要。这直接影响项目的长期可维护性。

@angular/cli 处于活跃维护状态。

• 跟随 Angular 版本定期更新。
• 提供最新的构建优化和框架特性支持。

# angular/cli: 检查版本
g ng version

@microsoft/rush 处于活跃维护状态。

• 专注于解决大型仓库的依赖和构建问题。
• 持续更新以支持新的包管理器和节点版本。

# rush: 检查版本
$ rush --version

create-react-app 已正式归档（Deprecated）。

• GitHub 仓库已存档，不再接受新功能。
• React 官方文档不再推荐用于新项目。

# create-react-app: 初始化（不推荐）
$ npx create-react-app my-app

vue-cli 处于维护模式（Maintenance）。

• 仅修复严重错误，不再添加新功能。
• Vue 3 官方推荐转向 Vite 生态。

# vue-cli: 初始化（仅限旧项目）
$ vue create my-project

🛠️ 项目初始化：生成代码结构

初始化的命令和生成的文件结构决定了开发的起点。

@angular/cli 生成完整的 Angular 工作区。

• 包含配置文件、测试设置和示例组件。
• 支持指定路由、样式格式等选项。

# angular/cli: 创建新项目
g ng new my-app --routing --style=scss

@microsoft/rush 初始化一个 Monorepo 根目录。

• 生成 common、projects 文件夹和核心配置文件。
• 不生成具体应用代码，需配合其他工具使用。

# rush: 初始化仓库
$ rush init

create-react-app 生成标准的 React 单页应用。

• 包含 src、public 目录和默认构建配置。
• 隐藏了 Webpack 配置，主打零配置体验。

# create-react-app: 创建 React 应用
$ npx create-react-app my-app

vue-cli 生成 Vue 项目结构。

• 支持选择 Vue 版本、路由器、状态管理等插件。
• 基于 Webpack，配置相对固定。

# vue-cli: 创建 Vue 项目
$ vue create my-project

⚙️ 配置文件：集中管理 vs 隐藏细节

配置文件的处理方式影响自定义构建流程的灵活性。

@angular/cli 使用 angular.json 集中配置。

• 所有构建目标、服务配置都在一个文件中。
• 支持多环境配置（production, development）。

// angular/cli: angular.json
{
  "projects": {
    "my-app": {
      "architect": {
        "build": { "options": { "outputPath": "dist/my-app" } }
      }
    }
  }
}

@microsoft/rush 使用 rush.json 管理仓库策略。

• 定义项目依赖关系、版本策略和构建命令。
• 不直接配置 Webpack，而是协调子项目的构建。

// rush: rush.json
{
  "projects": [
    { "packageName": "my-app", "projectFolder": "projects/my-app" }
  ]
}

create-react-app 隐藏配置，支持 package.json 简单覆盖。

• 默认不暴露 Webpack 配置。
• 高级自定义需运行 eject（不可逆，不推荐）。

// create-react-app: package.json
{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

vue-cli 使用 vue.config.js 进行链式配置。

• 允许修改 Webpack 配置而不完全 eject。
• 提供 API 来调整加载器和插件。

// vue-cli: vue.config.js
module.exports = {
  configureWebpack: {
    output: { filename: 'js/[name].js' }
  }
}

📦 构建与开发服务器：启动与打包

日常开发中最常用的命令是启动本地服务和生产打包。

@angular/cli 提供 ng serve 和 ng build。

• 内置开发服务器，支持实时重载。
• 构建产物优化良好，支持预算检查。

# angular/cli: 开发与服务
g ng serve
g ng build --configuration production

@microsoft/rush 通过 rush build 协调子项目。

• 本身不提供开发服务器，依赖子项目脚本。
• 支持增量构建，只构建变更的项目。

# rush: 构建所有项目
$ rush build
$ rush rebuild

create-react-app 使用 npm start 和 npm run build。

• 脚本封装在 react-scripts 中。
• 开发服务器启动速度较慢，尤其是大型项目。

# create-react-app: 启动与构建
$ npm start
$ npm run build

vue-cli 使用 vue-cli-service serve 和 build。

• 基于 Webpack 的热更新。
• 相比 Vite，冷启动速度较慢。

# vue-cli: 服务与构建
$ vue-cli-service serve
$ vue-cli-service build

🏗️ 多项目支持：单应用 vs 仓库管理

这是 @microsoft/rush 与其他三个工具最大的区别点。

@angular/cli 支持工作区（Workspace）多项目。

• 可以在一个仓库中管理多个 Angular 应用和库。
• 适合中型规模的多应用结构。

# angular/cli: 生成库
g ng generate library my-lib

@microsoft/rush 专为大型 Monorepo 设计。

• 处理跨项目依赖链接（Symlinking）。
• 确保所有项目使用一致的依赖版本。

# rush: 更新依赖链接
$ rush update
$ rush link

create-react-app 仅支持单应用。

• 每个项目独立管理依赖。
• 不适合代码共享或多应用协作。

# create-react-app: 无多项目命令
# 需手动管理多个文件夹

vue-cli 主要面向单应用。

• 虽可手动配置多入口，但非核心设计目标。
• 复杂多项目需借助其他工具。

# vue-cli: 无原生多项目管理命令
# 需手动配置 vue.config.js 多入口

🤝 相似之处：共同的基础能力

尽管定位不同，这些工具在基础功能上有重叠。

1. 📦 依赖管理集成

• 都依赖 npm 或 yarn 安装包。
• 都在 package.json 中管理脚本。

// 所有工具共用 package.json 结构
{
  "dependencies": { "react": "^18.0.0" },
  "devDependencies": { "typescript": "^5.0.0" }
}

2. 🔧 脚本命令抽象

• 都通过 npm run 提供简化的命令。
• 隐藏了底层复杂的构建工具调用。

// 通用启动方式
$ npm start
$ npm run build

3. 🌐 生产环境优化

• 都支持代码压缩、Tree Shaking。
• 都生成静态资源用于部署。

// 所有工具都支持构建产物输出
$ npm run build
# 输出到 dist/ 或 build/ 目录

📊 总结：关键差异对比

💡 最终建议

@angular/cli 是 Angular 开发者的唯一选择 — 它稳定、功能完整且官方支持。如果你的技术栈是 Angular，无需犹豫。

@microsoft/rush 是大型团队管理复杂仓库的利器 — 当你需要协调几十个包和应用，且需要严格的版本控制和增量构建时，它是最佳选择。但它不适合单个小项目。

create-react-app 已成历史 — 尽管它曾经很简单，但现在它的构建速度慢且不再更新。新 React 项目请选择 Vite 或 Next.js。

vue-cli 已进入生命周期末期 — 对于 Vue 3 项目，官方强烈推荐 create-vue (基于 Vite)。仅在维护旧版 Vue 2 项目时考虑使用它。

核心结论：工具的选择不仅看功能，更要看生态趋势。对于新项目，优先选择活跃维护且符合现代构建标准（如 Vite、Turbopack）的工具，避免技术债务。