基于Turborepo的单体仓库能否用单命令启动Dev与子包Storybook？

当然可以，以下两种方案都能实现用单条命令同时启动两个服务，优先推荐适配Turborepo原生能力的方案：

方案1：利用Turborepo任务管道配置 #

Turborepo本身支持定义并行任务和依赖关系，步骤如下：

1. 确认子包package.json中已存在storybook脚本：

{
  "scripts": {
    "storybook": "storybook dev -p 6006"
  }
}

2. 修改根目录的turbo.json，添加自定义任务管道：

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "dev": {
      "cache": false
    },
    "storybook": {
      "cache": false,
      "outputs": []
    },
    "dev:all": {
      "cache": false,
      "dependsOn": ["dev", "storybook"]
    }
  }
}

• 若需要先启动根项目dev再启动Storybook，可给storybook任务添加"dependsOn": ["dev"]；若无需顺序，保持上述配置即可让两个任务并行执行。

3. 在根目录package.json中新增聚合脚本：

{
  "scripts": {
    "dev": "turbo run dev",
    "storybook": "turbo run storybook",
    "dev:all": "turbo run dev:all"
  }
}

执行npm run dev:all即可一次性启动两个服务。

方案2：使用并发工具concurrently #

如果不想修改Turborepo配置，可借助concurrently工具实现多命令并行：

1. 在根目录安装依赖：

npm install concurrently --save-dev

2. 修改根目录package.json的脚本：

{
  "scripts": {
    "dev": "turbo run dev",
    "storybook": "cd packages/[你的子包名称] && npm run storybook",
    "dev:all": "concurrently \"npm run dev\" \"npm run storybook\""
  }
}

将[你的子包名称]替换为Storybook所在子包的实际路径。执行npm run dev:all即可同时启动两个服务。

注意事项 #

• 确保两个服务使用不同端口（默认情况下，Turborepo dev服务多为3000，Storybook默认6006，一般不会冲突）；
• Turborepo原生方案更适配单体仓库的任务管理逻辑，能利用其缓存和任务调度能力，优先推荐使用。

内容的提问来源于stack exchange，提问作者Mix Master Mike