如何为 React SSR 和 API 构建 monorepo

Question

我试图了解为 NodeJS/React 项目构建 monorepos 的最佳实践。

我需要：

1. 使用服务器端渲染反应 SPA。

2. 后端带有 Express、MongoDB、mongoose 模块等。

3. 一些实用函数、助手、枚举等的共享（公共）模块；

用 monorepo 构建这种架构的优雅方式是什么（我将使用 Lerna）？

• 我应该将 API 和 SSR EXpress 服务器分开吗？
• 如果是，我应该将 React 前端代码与 SSR 服务器分开吗？
• 如何配置 webpack 开发环境，所以在开发过程中其他模块总是会得到“共享”模块的转译（Babel）版本（这个问题有点超出范围，可能解决方案很简单）

我知道答案主要是“视情况而定”，但我需要通用方法，这适用于许多情况，即使它有点过度设计。

谢谢

Answer 1

嗯，是的，主要取决于:)。但是，我只是用我自己的代码库完成了这个转换，所以希望我能有所帮助。我最近使用 lerna 将 RMWC 从一个单一存储库转换为多个包。https://jamesmfriedman.github.io/rmwc/

我的回答将做出以下假设：

• 您正在单独发布您的包（因此 lerna）
• 因此，您的单个包被很好地组件化并且具有良好的关注点分离
• 您正在 npm 上的范围组织下发布您的包（我的是 @rmwc）。这不是必需的，但是这个特殊的设置让我完成了一些有趣的 webpack hack。如果您的公司使用私有 npm，这也是您所拥有的。

有一个 Base / Core / 或 Utils 模块

参考：https : //github.com/jamesmfriedman/rmwc/tree/master/src/base

这是一个包含所有或大部分其他模块将依赖的通用工具的单一模块。一般的经验法则是，如果有多个包需要它，请将其拉​​出到您的基本模块中，以便对其进行正确的版本控制和共享。这也将防止您的代码将来出现碎片，因为当您更新基本模块代码时，您将需要重构使用它的组件。

是的，分开您的 SSR 代码

这只是关注点的良好分离。如果您考虑一下，React 是同构的，因此您的组件并不真正关心它们的渲染位置。如果没有关于您的代码库或您正在解决的问题的更多详细信息，我的直觉会告诉我只制作一个额外的 SSR / 服务器包。从依赖的角度来看，这也是有道理的。您的任何组件都不会依赖于这些包，但这些包将依赖于您的所有组件。

决定包分离的一部分还与可能频繁和不频繁更改的内容有关。同样，高度依赖于您的问题，但是如果您的服务器或 ssr 包仅负责渲染和补充组件，则它们可能不会经常更改。

我没有这方面的 1:1 参考，但我的项目中关闭的东西可能是重新导入我所有其他组件的根 rmwc 模块。https://github.com/jamesmfriedman/rmwc/tree/master/src/rmwc

网络包魔法

Lerna 包含一个名为“bootstrap”的方法，它神奇地安装了所有依赖项并将一堆目录符号链接在一起。如果您使用的是 Typescript 或 Flow，符号链接可能会导致问题或根本不起作用。对我来说，我创建了一个路径别名作为解决方法。

https://github.com/jamesmfriedman/rmwc/blob/master/config-overrides.js#L38

基本上，只要引用 @rmwc（我的 npm 范围），我就会将 webpack 重定向到我的 src 文件夹。这是我从将它们全部置于同一范围内而受益的地方。如果有不同的作用域或包名，您仍然可以使用以下技巧，只需指定多个别名。

我遇到的其他问题

• 释放！这不是直截了当的。每个包都有自己的 dist 文件，必须部署（构建 es5 代码）。解决方案，运行lerna version而不是lerna release. 这使得 lerna 不运行 npm 发布步骤。然后，您可以在每个包中都有一个自定义发布脚本。https://github.com/jamesmfriedman/rmwc/blob/master/config-overrides.js#L38

• 版本控制：不要做独立版本。我只有轶事推理，但它使事情变得更加混乱，并且更难跟踪您的包裹的演变。毕竟，即使它是单独发布的，它仍然是一个单独的项目，所以看到版本号一起移动是有意义的。

• 将您的主 package.json 文件保存在所有脚本的智能根目录中，尽可能减少其他包。对于我的项目大小，我所做的任何更改都会乘以 38 个组件。

祝您狩猎愉快，希望对您有所帮助！