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时失败{ {1}}或.ts个文件。

关于我可能遗失的任何想法？

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/**/*"
    ],
  ],
}

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

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

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

确保每个 tsconfig 都使用 "extends": "../../tsconfig.json"

扩展此基础

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

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

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

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

我建议您也将学习与这样的设置一起使用。您还需要对构建管道进行一些修改，因为您要导入 /web 文件夹之外的 /web 文件。有关更完整的示例，您可以查看此存储库：https://github.com/NiGhTTraX/ts-monorepo

React Monorepo纱线工作空间+打字稿+绝对进口

1 个答案: