node.js - 如何构建一个 Express+React TypeScript 项目？

Question

我目前正在尝试建立一个使用 Express 作为后端并使用 React 作为前端的项目。我也想为这两个部分使用 TypeScript。为了便于设置，我使用了npx create-react-app client --template typescriptand 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

为了到达那里，我将outDir服务器的更改tsconfig.json为../dist/server和build客户端的脚本更改package.json为react-scripts build && mv build ../dist/client（如此处所述）。

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

标签： node.jsreactjstypescriptexpressdirectory-structure

Answer 1

你可以通过我知道的两种方式来实现这一点：

1. 将客户端构建文件夹保存在客户端根目录中，然后像此示例中一样对其进行处理。

2. 使用Yarn Workspaces，node_modules主要在根文件夹中（包使用相同依赖的不同版本时除外）

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