在 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

您可以使用纱线工作区来实现这种目的， 我专门为这种配置创建了一个最小的工作样板： https://github.com/rok-tel/ts-express-react

查看服务器(快递(和客户端(反应(同时使用的./packages/shared文件夹

Answer 2

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

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

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

用于创建共享代码包的文档：

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

Answer 3

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

1. 在根级别创建.env文件(与web-app目录的package.json级别相同(
2. 设置环境变量，NODE_PATHshared/(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