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

【问题标题】：How do you enable hot reloading in a Typescript monorepo with Lerna and Yarn Workspaces?如何使用 Lerna 和 Yarn Workspaces 在 Typescript monorepo 中启用热重载？
【发布时间】：2020-08-27 10:38:36
【问题描述】：

我们使用具有这种结构的完整 TypeScript 单一存储库：

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 应用程序使用。

热重载也应该在项目中通用。

目前全局 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,

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

【问题讨论】：

标签： reactjs typescript google-cloud-functions lerna monorepo

【解决方案1】：

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

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

【讨论】：