Node.js 在create react应用程序中包含共享项目

在我的项目中，我有以下文件夹/项目结构

Project
├── client (create-react-app)
│   ├── tsconfig.json
│   └── packages.json
├── server
│   ├── tsconfig.json
│   └── packages.json
└── shared
    ├── tsconfig.json
    └── packages.json

共享项目主要是我在前端和后端使用的接口/类类型声明，因此它们使用相同的对象类型

我使用typescript中引用的项目将共享项目包括在客户端和服务器中

tsconfig.json

...
},
  "references": [
    {
      "path": "../shared"
    }
  ],

尽管尝试在useReducer钩子中使用导入的类型之一时：

客户端/src中的组件

import React, { useReducer, useEffect } from 'react';
import { IRoadBook, GetNewRoadBook} from '../../../shared/src/types/IRoadBook';
import { Grid, TextField, Button } from '@material-ui/core';
import { useParams } from 'react-router-dom';

type State = {
    RoadBook: IRoadBook | any;
}
export default function RoadBookEditor() {
    const { objectId } = useParams();
    const [state, dispatch] = useReducer(reducer, {RoadBook : GetNewRoadBook()});
....

启动项目时发生以下错误： “找不到模块：您试图导入../../../shared/src/types/IRoadBook，它位于项目src/目录之外。相对导入位于项目src/目录之外。” 不支持src/的

从我读到的内容来看，这是CreateReact应用程序配置强加的限制

如果我这样做

const [state, dispatch] = useReducer(reducer, {RoadBook :{}});

代码成功构建/运行。（这会导致视觉问题，但这不是问题的重点）

问题：在我的create react app客户端项目中包含此共享项目的正确方式是什么

shared/types/IRoadBook.tsx

export interface IRoadBook {
        _id: string;
        Name: string;
        Description: string;
}

export function GetNewRoadBook(): IRoadBook {
        return { _id: '', Name: '', Description: '' } as IRoadBook;
}

---

如果我理解正确，您需要的是

monorepo

设置。 开箱即用

create react app

不支持从源文件夹外部导入代码。要实现这一点，您需要修改其中的webpack配置，有两种选择： 1-使用类似于等的东西。 2-分叉

CRA

和修改

react脚本

（） 3-弹出和修改WebPackageConfig

对于2和3，您需要从网页包配置中删除

ModuleScopePlugin

，并将路径添加到

babel loader

您还可以在其他几个地方找到方向：

---

阻力最小的方法是将共享的内容作为单独的回购协议，并使用带有git url的npm将其安装到两个项目中。@JaredSmith担心这样的解决方案可能会有问题，在这种情况下感觉有些过火，因为这只是我学习react/nodejs的一个小辅助项目。不过还是谢谢你。这其实并不过分：只要在你的本地机器上做一个单独的回购协议，然后通过npm将它安装到你的项目中。你不必发表它或任何东西。我理解你对无法将乍一看所见作为合理的项目结构而感到沮丧，但在学习技术堆栈时，始终要接受这样的可能性：如果工具不让你做某件事，那么可能工具是正确的，而你的第一印象是错误的。情况并非总是如此，但要保持开放的心态。