React Monorepo 纱线工作区 + 打字稿 + 绝对导入

Posted 2023-02-16

【中文标题】React Monorepo 纱线工作区 + 打字稿 + 绝对导入

【英文标题】：React Monorepo yarn workspaces + typescript + absolute imports

【发布时间】：2018-11-03 22:23:49

【问题描述】：

我在使用纱线工作区和打字稿设置 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"
    ]

我的问题是：当我从common 项目中导入web 上的文件时，如果它是.js 文件，它可以正常工作，但在使用.ts 或.tsx 文件时会出现TypeError: Object(...) is not a function 失败。

关于我可能缺少什么的任何想法？

【问题讨论】：

同样的问题，我很想得到一个答案！

一年后，仍在寻找答案

【参考方案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/**/*"
    ],
  ],

然后，您还需要告诉 typescript 如何解析导入。

在根 tsconfig.json 中，设置以下内容：

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

确保每个 tsconfig 都使用 "extends": "../../tsconfig.json" 扩展此基础

在web/package.json或任何需要导入common的包内，将common定义为依赖：

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

现在，如果您的 common package.json 的名称设置为“@myproject/common”，您可以使用以下命令将代码导入 web：

import  myUtilFunction  from "@myproject/common";

我建议您也将 learn 与这样的设置一起使用。 您还需要修改一些构建管道，因为您要在 /web 文件夹中导入 /web 文件夹之外的文件。如需更完整的示例，您可以查看此 repo：https://github.com/NiGhTTraX/ts-monorepo