如何为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从一个Mono仓库转换为多个软件包。 https://jamesmfriedman.github.io/rmwc/

我的回答将做以下假设：

• 您要单独释放包裹（因此lerna）
• 因此，您的各个程序包组成良好，并且关注点分离良好
• 您将在npm的某个有组织的组织下发布您的软件包（我的@rmwc）。这不是必需的，但是这种特殊的设置使我可以进行一些有趣的Webpack hack。如果您的公司使用私有npm，这也是您要拥有的。

具有基本/核心/或实用程序模块

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

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

是，请分离您的SSR代码

这只是关注点之间的良好分离。如果您考虑一下，React是同构的，因此您的组件实际上并不关心它们的渲染位置。如果没有更多关于您的代码库或您要解决的问题的信息，我的直觉会告诉我仅制作一个附加的SSR / Server程序包。从依赖关系的角度来看，这也是有意义的。您的所有组件都不会依赖这些软件包，但是这些软件包将依赖您所有的组件。

决定包装分离的部分还与可能会频繁更改和不经常更改的内容有关。再次，这高度取决于您的问题，但是如果服务器或ssr程序包仅负责渲染和水合组件，则它们可能不会经常更改所有内容。

我没有1：1的引用，但是我项目中的closes可能是重新导入所有其他组件的根rmwc模块。 https://github.com/jamesmfriedman/rmwc/tree/master/src/rmwc

Webpack魔术

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 publish步骤。然后，您可以在每个包中都有一个自定义发布脚本。 https://github.com/jamesmfriedman/rmwc/blob/master/config-overrides.js#L38

• 版本控制：请勿执行独立的版本。我只有轶事推理，但是这使事情变得更混乱，更难以跟踪软件包的发展。毕竟，尽管它是单独发行的，但它仍然是一个项目，因此可以看到版本号一起移动。

• 使用所有脚本将主package.json文件保留在根目录中，并尽量减少其他软件包。根据项目的规模，我所做的任何更改都将乘以38个组件。

打猎愉快，希望对您有帮助！