React Typescript SSR 与 monorepo 项目结构

Question

我的项目目前的结构如下：

my-project/
    client/
        src/
        dist/
            index.html
        package.json
        tsconfig.json
    server/
        src/
        dist/
        package.json
        tsconfig.json
    common/
        src/
        dist/
        package.json
        tsconfig.json
    package.json

client 是一个 React 应用程序； server 既服务于客户端的 dist 文件，又作为它的 API；而common 是一个包含client 和server 使用的东西的包。

每个子文件夹都有自己的tsconfig 配置和dist 文件夹。

在我需要实施 SSR 之前，它运行良好。

我首先将app.get('*', loadAppContent); 添加到 Express 实例中。

import React from 'react';
import fs from 'fs';
import path from 'path';
import ReactDOMServer from 'react-dom/server';
import {StaticRouter} from 'react-router-dom';
import {Request, Response} from 'express';

import App from '../../client/src/App';


export function loadAppContent(req: Request, res: Response) {
    fs.readFile(path.resolve('../client/dist/index.html'), 'utf8', (err, data) => {
        if (err) {
            console.error(err);
            return res.status(500).send('An error occurred');
        }

        const markup = ReactDOMServer.renderToString(
            <StaticRouter context={{}} location={req.url}>
                <App/>
            </StaticRouter>
        );

        return res.send(
            data.replace(
                '<div id="app"></div>',
                `<div id="app">${markup}</div>`
            )
        );
    });
}

现在，当我尝试编译 server 时，它也会尝试编译 client（因为有一个对 App 的导入，它位于 client 内部）。这也意味着server的dist文件夹转自：

dist/
    index.ts
    server.files.ts

收件人：

dist/
    client/
        src/App.tsx
        client.files.ts
    server/
        index.ts
        server.files.ts

client 使用错误的设置编译（因为它有自己的 tsconfig 文件！）。

可能的方法

以下是一些我能想到但无法奏效的可能解决方案：

• 将所有三个包编译到同一个dist 文件夹： 有可能，但这意味着client 将不得不覆盖server 的错误编译，而自定义tsconfig 问题是没解决。
• 防止server 编译它导入的client 代码： 听起来是最好的解决方案，但我无法以这种方式配置./server/tsconfig.json。

如果您有任何想法（或需要任何其他信息），请告诉我。

Answer 1

我很抱歉我的简短回答，但我可以建议您将您的单个回购分成两个单独的回购吗？一种只运行在后面，另一种服务于前面，然后将它们托管在不同的服务器上。

我以前的结构和你的一样，随着时间的推移变得非常痛苦。创建两个存储库并将它们托管在不同的服务器上在各个方面都更好。

考虑到您的第一种方法，它可以工作：

• 您可以配置每个 .tsconfig 以排除其他文件夹的文件。
• 你的 my-project 文件夹中应该有一个 dist/ 文件夹
• 您可以使用 gulp，而不是“手动”编译每个文件夹，然后将其复制粘贴到主 /dist/ 存储库中，它将帮助您在一行命令中创建 dist/（基本上您必须告诉他编译服务端，然后放到dist中，再编译前端，然后放到dist/client中

考虑到您的第二种方法，您应该在将客户端代码放入之前编译服务器（然后创建另一个 /dist 文件夹）

是否完全不考虑创建两个存储库？