concurrently 命令详解

一、concurrently安装

🔍 concurrently 安装位置分析

使用 pnpm add concurrently -w 时，-w 标志表示将 concurrently 安装到 monorepo 根目录 ，这会将它作为整个项目的依赖，而不仅仅是某个子包的依赖。因此，安装命令应该在 项目的根目录 执行，这样所有的子包（包括 cardui 层）都可以共享该依赖。

为什么在根目录安装更友好？

1. 集中管理 ：将 concurrently 安装到根目录，可以确保所有工作区共享同一个版本，不会因为每个子包安装不同版本而导致不一致。
2. 避免重复安装 ：如果你在 cardui 目录下安装 concurrently，它只会作用于 cardui，而根目录安装可以使得所有子包都能使用它，无需重复安装。
3. 简洁的依赖结构：安装在根目录可以避免在每个子包中都包含同样的开发依赖，让项目结构更加简洁，减少冗余。

🔨 安装命令

你应该在 根目录 执行以下命令：

pnpm add concurrently -w

这会将 concurrently 添加到根目录的 devDependencies 中，并允许 cardui 和其他任何子包通过 pnpm 访问它。

🛠 cardui 目录中的 scripts 配置

假设你已经在根目录安装了 concurrently，那么在 cardui/package.json 中，你可以通过如下方式配置 scripts：

{
  "scripts": {
    "start": "concurrently "pnpm -F mock-server dev" "rsbuild dev""
  }
}

🎯 解释 scripts 配置

• pnpm -F mock-server dev : 这条命令会启动 mock-server，假设 mock-server 有一个 dev 脚本，通常用于启动开发环境（例如启动 json-server）。
• rsbuild dev : 这条命令会启动你的 rsbuild 开发环境，假设你的 rsbuild 配置文件中有 dev 脚本，通常用于启动项目构建和服务。

concurrently 会并行执行这两个命令，从而在同一终端窗口中同时运行 mock-server 和 rsbuild，实现开发环境的并行启动。

---

📝 小结

• 安装位置 ：在 根目录 安装 concurrently，通过 pnpm add concurrently -w，保证它可以在整个 monorepo 中共享。
• scripts 配置 ：在 cardui/package.json 中，通过 concurrently 执行多个开发命令，使得开发环境可以并行启动。

二、concurrently 的执行

1. concurrently 命令是如何执行的？

concurrently 是一个工具，它可以在一个命令行窗口中并行执行多个命令。当你运行一个脚本时，concurrently 会启动多个进程来执行你指定的命令，并且将它们的输出显示在同一个终端中。

假设你的 package.json 中有如下的 scripts 配置：

{
  "scripts": {
    "start": "concurrently "pnpm -F mock-server dev" "rsbuild dev""
  }
}

当你执行 pnpm start 时，concurrently 会：

1. 并行启动两个命令：

   • pnpm -F mock-server dev
   • rsbuild dev

2. 执行命令：

   • pnpm -F mock-server dev 会调用 pnpm 来执行 mock-server 目录中的 dev 脚本。
   • rsbuild dev 会执行根目录中的 rsbuild 配置，并启动项目的构建或服务。

3. 输出显示：

   • concurrently 会同时显示两个命令的输出，你可以看到它们的运行状态，通常会区分它们的输出来源。

2. cardui 中 package.json 执行的 rsbuild dev 会去哪个目录下寻找并执行？

rsbuild dev 命令是一个构建工具的命令。在你的项目结构中，rsbuild 配置应该是位于根目录或者 cardui 目录下。

• 执行流程：

  • 你运行 pnpm start，start 脚本触发了 concurrently，然后并行执行 pnpm -F mock-server dev 和 rsbuild dev。
  • rsbuild dev 会在执行时查找 当前目录 下的 rsbuild.config.ts 或 rsbuild.config.js 配置文件，来确定如何构建或启动项目。

• 在哪个目录执行：

  • 如果你在 cardui 目录下 运行 pnpm start，rsbuild dev 会尝试在 cardui 目录中查找配置文件（例如 rsbuild.config.ts），并根据这个配置启动相关的开发服务或构建流程。
  • 如果你在根目录下运行 pnpm start ，rsbuild dev 会在根目录中查找配置文件，通常这是全局的配置文件，用于启动整个项目的构建和开发流程。

详细解释：

目录结构分析：

假设你的项目结构如下：

projectRoot/
├── package.json  (root-level config, contains rsbuild config)
├── src/
│   └── cardui/
│       └── package.json  (specific to cardui, contains start script)
│       └── rsbuild.config.ts (cardui-specific rsbuild config)
│       └── tsconfig.json
├── rsbuild.config.ts  (root-level rsbuild config)
├── pnpm-workspace.yaml
└── ...

• 在 cardui/package.json 中：

  • rsbuild dev 会执行位于 cardui/ 目录下的 rsbuild.config.ts 文件中的配置。如果该文件不存在，rsbuild 会报错。

• 在根目录执行时：

  • 如果你在根目录执行 rsbuild dev，那么它会优先查找 根目录中的 rsbuild.config.ts 文件（如果存在的话），并根据根目录的配置执行相应的操作。

---

小结：

1. concurrently 执行的是并行命令，它不会区分目录，具体是由你执行脚本的目录来决定执行环境。

2. rsbuild dev 的执行目录：

   • 如果从 cardui 目录执行 ：rsbuild dev 会去 cardui/ 目录查找 rsbuild.config.ts 配置文件。
   • 如果从根目录执行 ：rsbuild dev 会去根目录查找 rsbuild.config.ts 配置文件。

要明确目录的执行路径和配置文件，建议确保每个子包（如 cardui）都有自己的配置文件（如果需要），这样可以更灵活地管理不同子包的构建需求。