在 Typescript React 项目和 Typescript Express 项目之间共享代码

Question

我一直在尝试想出一个优雅的解决方案来在彼此密切相关的两个项目之间共享代码。
我有一个 React Web 应用程序，它只包含所有客户端代码，我有一个 Express 应用程序，它为 React Web 应用程序提供服务，但它也充当 API。因为我在两个项目中都使用 Typescript，所以我想重用一些类型。为此，我创建了一个shared 项目。

我目前的文件夹结构如下：

• 网络应用
• 共享
• 服务器

现在我想将web-app 和server 项目与我的shared 项目链接，但是有一些限制：

1. 不应将此共享文件夹上传到 npm。
2. 我必须仍然能够使用 Heroku 部署所有内容（这排除了 npm link 我相信）。
3. 我不想退出我的 React 项目。

我不确定我当前的项目结构是否允许我需要的功能，因此请随时建议其他文件夹结构。

Answer 1

考虑使用 Nx - https://nx.dev/

这是一个很棒的框架来管理 monorepos。

• 将他们的 React 应用程序样板用于客户端项目
• 使用他们的 express 项目样板来创建 API
• 使用他们的共享代码包样板来创建共享代码包

创建共享代码包的文档：

https://nx.dev/l/r/tutorial/07-share-code

Answer 2

您可以将 yarn 工作区用于这种目的， 我为这种配置创建了一个最小的工作样板： https://github.com/rok-tel/ts-express-react

查看 ./packages/shared 文件夹，它同时被服务器（express）和客户端（react）使用

Answer 3

如果您使用create-react-app 创建网络应用程序，那么您可以轻松使用NODE_PATH 环境变量进行绝对导入，而无需创建节点模块。

1. 在根级别创建.env文件（与web-app目录的package.json相同级别）
2. 设置环境变量，NODE_PATH 到 shared/ (NODE_PATH=shared/)

现在而不是做类似的事情

import { editUser } from ‘../../../shared/actions’;

你可以使用

import { editUser } from ‘shared/actions’;

修复 ESLint

安装eslint-plugin-import，防止 eslint 抛出导入错误。并将您的.eslintrc 文件更新为

{
    "settings": {
        "import/resolver": {
            "node": {
                "moduleDirectory": ["node_modules", "shared/"]
            }
        }
    }
}

修复流程

将以下内容添加到您的.flowconfig 文件中

[options]
module.system.node.resolve_dirname=node_modules
module.system.node.resolve_dirname=shared