如何很好地构建 Express+React TypeScript 项目?

Question

我目前正在尝试建立一个使用Express作为后端和React作为前端的项目。我还想在这两个部分使用 TypeScript。为了便于设置，我使用了npx create-react-app client --template typescript和npx express-generator-typescript server，从而产生了以下目录结构：

myProjectRoot/
|_ server/
|_ src/
|_ node_modules/
|_ package.json
|_ tsconfig.json
|_ ...
|_ client/
|_ src/
|_ node_modules/
|_ package.json
|_ tsconfig.json
|_ ...

现在，我在client/package.json中配置了 React 的开发服务器，并用行"proxy": "http://localhost:3001"，让 Express 服务器侦听端口3001来处理 API 请求。目前为止，一切都好;对于开发，恕我直言，这完全没问题。

但是，我有点困惑如何最好地为生产版本设置命令。我想更改默认配置的构建目录，以避免客户端和服务器分别在隔离目录中构建：

myProjectRoot/
|_ server/
|_ ...
|_ src/
|_ dist/
|_ compiled_backend_code
|_ client/
|_ ...
|_ src/
|_ build/
|_ compiled_frontend_code

相反，我的目标是这样的东西，因为它对我来说似乎更干净：

myProjectRoot/
|_ server/
|_ client/
|_ dist/
|_ server/
|_ compiled_backend_code
|_ client
|_ compiled_frontend_code

为此，我将服务器tsconfig.json的outDir更改为../dist/server，并将客户端package.json中的build脚本更改为react-scripts build && mv build ../dist/client(如此处所述(。

现在的问题是编译的代码不再找到其依赖项，因为服务器和客户端的node_modules文件夹不再位于dist/目录或父目录中。我不确定这个问题的好解决方案是什么，所以我不胜感激任何意见，即使这意味着完全不同的项目结构。谢谢！

Answer 1

据我所知，您可以通过两种方式实现这一点：

1. 将客户端生成文件夹保留在客户端根目录中，然后像此示例中一样对其进行寻址。

使用

2. Yarn 工作区，其中node_modules主要位于根文件夹中(包使用同一依赖项的不同版本时除外(

顺便说一句，这个存储库是我使用 Yarn 工作区在 Typescript 中为全栈 Express + React Web 应用程序创建的样板。