在 create-react-app 中包含一个共享项目答案

【问题标题】：Including a shared project in create-react-app在 create-react-app 中包含一个共享项目
【发布时间】：2020-05-01 03:17:19
【问题描述】：

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

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 挂钩中使用其中一种导入的类型：

client/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()});
....

启动项目时出现以下错误： “未找到模块：您试图导入项目 src/ 目录之外的 ../../../shared/src/types/IRoadBook。相对导入外部的 src/ 不支持。”

从我读到的内容是 create-react-app 配置施加的限制。

如果我这样做

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;
}

【问题讨论】：

阻力最小的路径是使共享的东西成为一个单独的 repo，并使用带有 git url 的 npm 将其安装到两个项目中。
@JaredSmith 担心这样的事情会成为答案，在这种情况下感觉有点矫枉过正，因为这只是一个小项目来了解我的 react/nodejs 方法。不过还是谢谢。
这并不过分：只需在本地计算机上创建一个单独的 repo 并通过 npm 将其安装到您的项目中。你不必发布它或任何东西。我理解您无法将乍一看的东西用作合理的项目结构而感到沮丧，但是在学习技术堆栈时，请始终保持开放的态度，即如果工具不允许您做某事，则该工具可能是对，你的第一印象是错误的。情况并非总是如此，但请保持开放的心态。

标签： node.js typescript react-hooks create-react-app tsconfig

【解决方案1】：

如果我理解正确，您正在寻找的是monorepo 设置。开箱即用 create-react-app 不支持从源文件夹外部导入代码。要实现它，您需要修改其中的 webpack 配置，并且有几个替代方案： 1- 使用类似customize-cra、craco 等的东西。 2- 分叉CRA 并修改react-scripts (https://create-react-app.dev/docs/alternatives-to-ejecting/) 3- 弹出和修改 webpackconfig

对于 2 和 3，您需要从 webpack 配置中删除 ModuleScopePlugin 并将路径添加到 babel-loader。

您可以在其他几个地方获得方向： Create React App + Typescript In monorepo code sharing https://blog.usejournal.com/step-by-step-guide-to-create-a-typescript-monorepo-with-yarn-workspaces-and-lerna-a8ed530ecd6d

【讨论】：