如何在 TypeScript 单一仓库中使用 React Cosmos

Question

我无法让React Cosmos在 TypeScript monorepo 中工作。

虽然很简单，但他们的指令在单个包中适用于 TypeScript，但是一旦我尝试在 monorepo 中使用来自另一个 TypeScript 包的代码，它就会抱怨它不理解类型语法（显然它没有转换共享文件） .

为了简单地演示这个问题，我有一个带有两个包的最小 TypeScript monorepo（这里）：

• 包/客户端（@mono/client）
• 包/共享（@mono/shared）

客户端呈现单个页面，其中包含一个简单的<Greeting firstName="Joe" />组件。 问候组件使用共享包中的getGreeting函数并将其输出呈现到屏幕上。 我使用包裹来提供页面，它编译得很好。 但是，如果我尝试使用 React Cosmos，则会出现此错误：

[Cosmos] Using default cosmos config
[Cosmos] See you at http://localhost:5000
[Cosmos] Using default webpack config
[Cosmos] Building webpack...
webpack built f4d924ce19e1768283e9 in 1628ms
✖ ｢wdm｣: assets by status 2.6 MiB [cached] 1 asset
runtime modules 24.8 KiB 13 modules
modules by path ../../node_modules/ 2.3 MiB 243 modules
modules by path ./src/components/greeting/*.tsx 424 bytes
  ./src/components/greeting/index.fixture.tsx 182 bytes [built] [code generated]
  ./src/components/greeting/index.tsx 242 bytes [built] [code generated]
../shared/src/greeter.ts 39 bytes [built] [code generated] [1 error]
ws (ignored) 15 bytes [optional] [built] [code generated]

ERROR in ../shared/src/greeter.ts
Module build failed (from ../../node_modules/babel-loader/lib/index.js):
SyntaxError: /ts-monorepo-playground/packages/shared/src/greeter.ts: Unexpected token, expected "," (1:32)

> 1 | export function getGreeting(name: string) {
    |                                 ^
  2 |   return `Hello ${name}`;
  3 | }
  4 |

更多信息

• 宇宙版本：5.5.0
• Cosmos 配置：无
• 网络包版本：5.1.3
• Webpack 配置：无
• 巴别配置：

packages/client/.babelrc

{
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-typescript",
      {
        "isTSX": true,
        "allExtensions": true
      }
    ]
  ],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "@mono/shared": "../shared/src"
        }
      }
    ]
  ]
}

我不希望在运行 cosmos 之前对共享包进行任何预编译，cosmos 应该能够使用 babel 即时编译它需要的所有内容，因此热重载可以工作。

这就像 React Cosmos/Babel 不尊重我对其他包中文件的 babel 配置。