rsbuild-plugin-workspace-dev

提供按拓扑顺序启动 monorepo 子项目的能力。

rsbuild-plugin-workspace-dev 用于 monorepo 开发场景，它支持从当前项目开始计算依赖关系生成拓扑图，按拓扑顺序启动子项目。

使用

安装：

npm add rsbuild-plugin-workspace-dev -D

在 rsbuild.config.ts 里注册插件:

// rsbuild.config.ts
import { pluginWorkspaceDev } from "rsbuild-plugin-workspace-dev";

export default {
  plugins: [pluginWorkspaceDev()],
};

使用场景

在 monorepo 中，一个项目可能依赖多个子项目，而子项目之间也可能存在依赖关系。

比如 monorepo 中包含了一个 app 应用和多个 lib 包：

monorepo
├── app
└── lib1
└── lib2
└── lib3

其中，app 是基于 Rsbuild 构建的, lib 是基于 Rslib 构建的。app 依赖了 lib1 和 lib2：

{
  "name": "app",
  "dependencies": {
    "lib1": "workspace:*",
    "lib2": "workspace:*"
  }
}

lib2 依赖了 lib3：

{
  "name": "lib2",
  "dependencies": {
    "lib3": "workspace:*"
  }
}

此时会按照拓扑顺序先启动 lib1 和 lib3，再启动 lib2，最后启动 app。此处启动 lib 指的是执行 lib 的 dev 命令

{
  "scripts": {
    "dev": "rslib build --watch"
  }
}

识别子项目是否启动完成是通过匹配子项目日志实现的，默认支持 Rslib 子项目，同时支持手动配置 match 匹配

选项

sourceField

• 类型： object
• 默认值： 'source'

用于配置源代码文件对应的解析字段。

比如配置为 @custom/source：

pluginSourceBuild({
  sourceField: "@custom/source",
});

在 package.json 中，即可通过 @custom/source 指定源代码文件的路径：

{
  "name": "lib",
  "main": "./dist/index.js",
  "@custom/source": "./src/index.ts",
  "exports": {
    ".": {
      "@custom/source": "./src/index.ts",
      "default": "./dist/index.js"
    }
  }
}

resolvePriority

• 类型： 'source' | 'output'
• 默认值： 'source'

用于控制优先读取源代码还是产物代码。

默认情况下，@rsbuild/plugin-source-build会优先读取源代码，比如在下面的例子中，它会读取 source 字段。

{
  "name": "lib",
  "main": "./dist/index.js",
  "source": "./src/index.ts"
}

当 resolvePriority 设置为 'output' 时，@rsbuild/plugin-source-build会优先读取产物代码，即 main 或 module 字段指向的代码。

pluginSourceBuild({
  resolvePriority: "output",
});

• package.json 中的 exports 字段不受 resolvePriority 的影响。
• exports 中 key 的声明顺序决定了读取顺序，较早声明的 key 具有更高的优先级。

注意事项

在使用 @rsbuild/plugin-source-build的时候，需要注意几点：

1. 需要保证当前项目可以编译子项目里使用的语法或特性。比如子项目使用了 Stylus 来编写 CSS 样式，那就需要当前 app 支持 Stylus 编译。
2. 需要保证当前项目与子项目使用的代码语法特性相同，例如装饰器的语法版本一致。
3. 源码构建可能存在一些限制。如果在使用中遇到问题，你可以将子项目 package.json 中的 source 字段移除，使用子项目的构建产物进行调试。
4. 开启 composite: true 后，TypeScript 会生成 *.tsbuildinfo 临时文件，你需要将这些临时文件加入 .gitignore 中。

*.tsbuildinfo

License

MIT.