React Monorepo рабочие пространства пряжи + машинопись + абсолютный импорт

Question

У меня проблемы с настройкой проекта React с рабочими пространствами пряжи и машинописью. Моя структура папок:

-root
 -package.json
 -workspaces
  -web
  -common

и мой package.json файл:

{
  "name": "my-project-name",
  "private": true,
  "workspaces": [
  "workspaces/web",
  "workspaces/common"
  ],
  "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
}

Моя проблема: когда я импортирую файлы на web от common проект, он работает нормально, если это .js файл, но не с TypeError: Object(...) is not a function когда используешь .ts или же .tsx файлы.

Есть идеи о том, чего мне не хватает?

Answer 1

Я рекомендую использовать следующую файловую иерархию:

      - root
- package.json
- tsconfig.json
- packages 
  - common
    - package.json
    - tsconfig.json 
- services
  - web
    - package.json
    - tsconfig.json

Все в packagesпапку можно импортировать. Сервисы - это «листовые» проекты, которые вы не хотите импортировать в другие проекты.

Исходя из этого, ваш корневой package.json должен быть настроен следующим образом:

      {
"name": "my-project-name",
  "private": true,
  "workspaces": [
    "packages": [
      "packages/*",
      "services/**/*"
    ],
  ],
}

Затем вам также необходимо указать машинописному тексту, как разрешить импорт.

В корне tsconfig.json установите следующее:

      {
"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@myproject/*": ["packages/*/src"]
    },
}

Убедитесь, что каждый tsconfig расширяет эту базу с помощью "extends": "../../tsconfig.json"

Внутри web/package.json или любой пакет, который должен импортировать общий, определите общий как зависимость:

      {
  [...]
  "dependencies": {
    "@myproject/common": "*",
  }
}

Теперь, если вашему общему package.json присвоено имя "@ myproject / common", вы можете импортировать свой код в Интернет с помощью:

      import { myUtilFunction } from "@myproject/common";

Я бы посоветовал вам также использовать обучение с такой настройкой. Вам также нужно будет немного изменить конвейер сборки, поскольку вы импортируете файлы внутри / web, которые находятся за пределами папки / web. Для более полного примера вы можете проверить это репо: https://github.com/NiGhTTraX/ts-monorepo