javascript - 使用 Lerna 将 JavaScript 导入 TypeScript 应用程序

Question

我尝试使用 2 个 React 包创建一个 monorepo:

TypeScript (npx create-react-app app --template typescript)

JavaScript ( ui )

我有一个基本的 lerna.json配置

{
  "packages": ["packages/*"],
  "version": "1.0.0"
}

在 ui包我只是导出一个按钮(来自 src/Button.jsx ):

import React from 'react';

const Button = () => {
  return (
    <button>
      Start
    </button>
  )
}

export default Button;

我已经启动了 app使用 ui包裹。
将其导入 app导致以下错误:

Failed to compile
/lerna-demo/packages/ui/src/Button.jsx 5:4
Module parse failed: Unexpected token (5:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const Button = () => {
|   return (
>     <button>
|       Start
|     </button>

有没有办法将加载器添加到 lerna 或 app修复导入？

编辑

项目结构:

lerna-demo/
  - node_modules/
  - lerna.json
  - package.json
  - packages/
    - app (created using create-react-app)
      - ...
    - ui
      - node_modules/
      - package.json
      - yarn.lock
      - src/
        - Button.jsx

我导入Button组件的方式:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import * as Button from 'ui/src/Button';

const App: React.FC = () => {

  return (
    <div className="App">
      <Button />
    </div>
  );
}

export default App;

Answer 1

在您的 tsconfig.json由 CRA 创建，您需要告诉编译器还包括 ui pacakge，因此在您的示例中，它类似于:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src", "../ui/src",
  ]
}

另一种选择是扩展您的基本 lerna tsconfig.json它已经用 path 指向您的包裹我猜 - 所以来自你的 CRA tsconfig.json只需添加以下内容:

{
    "extends": "../../tsconfig.json",

和基地 tsconfig.json你应该定义路径的别名:
主要 tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "ui/*": ["./packages/ui/*"],