reactjs - 如何使用 Lerna 和 Yarn Workspaces 在 Typescript monorepo 中启用热重载？

Question

我们使用具有此结构的完整 TypeScript mono 存储库:

project
| - packages
    | - common
    | - appsCommon
    | - Next.js-App
    | - React-Native-App
    | - Google-Cloud-Functions

到目前为止，common 和 appsCommon 从 TypeScript 编译到 ES6 到一个 lib 文件夹中。

常用包的tsconfig.json是这样的:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "lib",
    "strict": true,
    "target": "es6",
    "jsx": "react"
  },
  "compileOnSave": true,
  "include": ["src"]
}

常用包的packages.json是这样的:

{
  "name": "@project/common",
  "version": "0.0.10",
  "main": "lib/index.js", 
  "types": "lib/index.d.ts", 
  "files": [
    "lib/**/*" 
  ],
  ...
}

这是 Common 所必需的，它发布到 npm 以供云功能使用，但它不是 appsCommon 所必需的，它直接由 Next.js 和 React Native 应用程序使用。

热重载也适用于项目中的公共(public)资源。

目前全局 packages.json 看起来像这样:

{
  "name": "project",
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "**react**",
      "**react-native**",
      ...
    ]
  },
  ...
}

目前 lerna.json 看起来像这样:

{
  "packages": [
    "packages/*"
  ],
  "npmClient": "yarn",
  "version": "0.0.10",
  "useWorkspaces": true,

我想这不仅仅是将公共(public) package.json 中的 lib 更改为 src 的问题，当我这样做时，这个模块会被 VS Code 加下划线:“未找到”。另外，我知道云函数可以使用原始 typescript ，但我不知道是否可以调用未编译的 typescript 包。

Answer 1

您可以使用 sync-monorepo-packages utility 编排模块的编译。 ，因为它具有通过 learna.json 自动发现包的功能，我看到你已经在使用了。

与使用热重载的目标相关，我发现了这个 github issue其中强调了热重新加载对于生产环境并不理想，但对于开发目的非常有用。