📖 pnpm dev:fe 完整解析
命令执行流程
pnpm dev:fe
展开后实际执行:
run-p start "dev:fe:editor --filter=@n8n/design-system"
这个命令做了两件事并行:
1️⃣ start (启动后端)
"start": "run-script-os"
run-script-os 会根据操作系统选择对应的脚本:
Windows: 执行 start:windows
cd packages/cli/bin && n8n
进入 CLI 目录并启动 n8n 后端服务器
Linux/Mac: 执行 start:default
cd packages/cli/bin && ./n8n
结果: 后端 API 服务器启动在 http://localhost:5678
2️⃣ dev:fe:editor --filter=@n8n/design-system (启动前端)
这实际上是一个字符串,会被解析为:
turbo run dev --parallel --env-mode=loose --filter=n8n-editor-ui --filter=@n8n/design-system
结果:
同时启动两个前端包的开发服务器
n8n-editor-ui: 主前端编辑器,监听 http://localhost:8080
@n8n/design-system: 设计系统组件库
🔧 工具链详解
run-p (npm-run-all2)
"npm-run-all2": "^7.0.2"
作用: 并行运行多个 npm scripts
run-p = run-parallel (并行运行)
run-s = run-series (串行运行)
示例:
run-p start dev:fe:editor
等价于同时运行这两个命令:
npm run start &
npm run dev:fe:editor &
turbo (Turborepo)
"turbo": "2.5.4"
作用: Monorepo 构建系统,用于管理多个包的构建和开发
关键参数解释:
turbo run dev --parallel --env-mode=loose --filter=!@n8n/design-system
参数 作用
run dev 在所有包中运行 dev 脚本
--parallel 并行执行(而非串行)
--env-mode=loose 宽松的环境变量模式,允许访问所有环境变量
--filter=n8n-editor-ui 只在 n8n-editor-ui 包中运行
--filter=!@n8n/chat 排除 @n8n/chat 包
run-script-os
"run-script-os": "^1.0.7"
作用: 根据操作系统运行不同的脚本
自动匹配 start:windows, start:default 等
📊 各个 dev 命令对比
pnpm dev (完整开发)
"dev": "turbo run dev --parallel --env-mode=loose --filter=!@n8n/design-system --filter=!@n8n/chat --filter=!@n8n/task-runner"
启动内容:
✅ 后端 (n8n CLI)
✅ 前端 (n8n-editor-ui)
✅ 所有依赖的包
❌ 排除: design-system, chat, task-runner
适用场景: 完整的全栈开发
pnpm dev:be (仅后端)
"dev:be": "turbo run dev --parallel --env-mode=loose --filter=!@n8n/design-system --filter=!@n8n/chat --filter=!@n8n/task-runner --filter=!n8n-editor-ui"
启动内容:
✅ 后端 (n8n CLI)
✅ 后端依赖的包
❌ 排除: 前端 (n8n-editor-ui)
适用场景: 只开发后端,前端使用生产构建
pnpm dev:fe (前端 + 后端服务器)
"dev:fe": "run-p start "dev:fe:editor --filter=@n8n/design-system""
启动内容:
✅ 后端服务器 (生产模式的 n8n CLI)
✅ 前端 (n8n-editor-ui) 开发模式
✅ 设计系统 (@n8n/design-system)
适用场景: 前端开发,后端使用已构建的版本
🔍 执行流程图
pnpm dev:fe
│
├─ run-p (并行运行)
│ │
│ ├─ start ────────────────────┐
│ │ └─ run-script-os │
│ │ └─ (Windows) │
│ │ start:windows │
│ │ ↓ │
│ │ cd packages/cli/bin │
│ │ n8n (启动后端) │── 后端: localhost:5678
│ │ │
│ └─ dev:fe:editor ─────────────┤
│ └─ turbo run dev │
│ --filter=n8n-editor-ui│── 前端: localhost:8080
│ --filter=@n8n/design-system
│ │
└───────────────────────────────┘
💡 关键区别总结
命令 后端模式 前端模式 其他包 用途
pnpm dev 开发(watch) 开发(HMR) 全部(watch) 完整全栈开发
pnpm dev:be 开发(watch) ❌ 后端相关 纯后端开发
pnpm dev:fe ⚠️ 生产模式 开发(HMR) 前端相关 纯前端开发
⚠️ 重要提示
dev:fe 中的后端是生产模式启动的,意味着:
❌ 不会自动重载后端代码更改
✅ 但前端有热更新 (HMR)
✅ 适合只开发前端界面
如果你需要同时开发前后端,应该使用 pnpm dev!
🎯 总结回答你的问题
Q: pnpm dev:fe 是前后端都启动了吗?
A: 是的,但方式不同:
后端: 启动的是已构建的生产版本 (不会热更新)
前端: 启动的是开发模式 (有热更新)
Q: 具体是怎么启动的?
A:
run-p 并行运行两个任务
start → 运行已构建的 n8n CLI (后端)
dev:fe:editor → turbo 启动前端 Vite 开发服务器
Q: run-p, turbo 是什么?
A:
run-p: 并行运行多个 npm 脚本的工具
turbo: Monorepo 构建系统,管理多包项目的构建和开发
需要我进一步解释任何部分吗?