前端工程化：使用 pnpm workspace 管理 SDK Monorepo

现状

AutoForm 项目包含多个包：

• core: SDK 核心逻辑
• loader: 引导加载器
• react-wrapper: React 组件封装
• vue-wrapper: Vue 组件封装
• docs: 文档站点

以前我们把它们放在不同的仓库里，维护起来非常痛苦：改了 core，要发版，然后去 react-wrapper 升级依赖，再发版...

迁移到 Monorepo

我们选择了 pnpm workspace + Turborepo 的方案。

目录结构

root/
  packages/
    core/
    loader/
    react/
    vue/
  apps/
    docs/
    playground/
  package.json
  pnpm-workspace.yaml

依赖管理

在 packages/react/package.json 中：

{
  "dependencies": {
    "@autoform/core": "workspace:*"
  }
}

workspace:* 告诉 pnpm 直接链接到本地的 core 包，而不是去 npm 下载。这意味着我们在 core 里改了代码，react 包能立即感知，无需发版。

构建加速：Turborepo

Turborepo 可以利用缓存加速构建。

// turbo.json
{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    }
  }
}

当我们运行 turbo build 时，它会分析依赖拓扑，并行构建。如果某个包没变，直接使用缓存。

总结

Monorepo 极大地提升了多包项目的开发效率。配合 pnpm 和 Turborepo，我们实现了代码共享、统一版本管理和极速构建。

👉 官网地址：51bpms.com