代码之家 › 专栏 › 技术社区 › WelcomeTo

如何为React SSR和API构建monorepo[关闭]

monorepo lerna express reactjs

0

WelcomeTo · 技术社区 · 7 年前

我需要:

使用monorepo(我将使用Lerna)构建这种架构的优雅方法是什么?

如果是,我应该将React前端代码与SSR服务器分开吗?
如何配置webpack开发环境,使开发过程中的其他模块总是得到“共享”模块的transpiled(Babel)版本(这个问题有点超出范围,可能只是解决方法很简单)

我知道答案主要是“这取决于”,但我需要普遍的方法,这将适用于许多情况,即使这将是一个有点过度工程。

谢谢

1 回复 | 直到 7 年前

1

4

James Friedman 7 年前

嗯,是的,主要取决于:)。但是,我刚刚用我自己的代码库完成了这个转换,所以希望我能提供一些帮助。我最近使用lerna将RMWC从一个mono repo转换为多个包。 https://jamesmfriedman.github.io/rmwc/

我的回答将作出以下假设:

您正在单独发布包(因此是lerna)
您正在npm上的作用域组织下发布您的包(我的是@rmwc)。这不是必需的,但这个特殊的设置让我完成了一些有趣的网页包黑客。如果你的公司正在使用一个私有的npm,这也是你应该拥有的。

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

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

决定包分离的一部分还与频繁和不频繁更改的内容有关。同样,高度依赖于您的问题,但是如果您的服务器或ssr包只是负责渲染和水合组件,那么它们可能不会经常更改所有这些内容。

对此我没有1:1的引用,但是我的项目中最重要的事情可能是根rmwc模块,它重新导入了我的所有其他组件。 https://github.com/jamesmfriedman/rmwc/tree/master/src/rmwc

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

基本上,只要引用@rmwc(我的npm作用域),我就将webpack重定向到src文件夹。这是我受益于他们都在同一范围内。如果有不同的作用域或包名称,您仍然可以使用以下技巧,只需指定多个别名。

释放!这不是直截了当的。每个包都有自己的dist文件,必须部署(构建es5代码)。解决方案,运行 lerna version 而不是 lerna release https://github.com/jamesmfriedman/rmwc/blob/master/config overrides.js#L38
版本控制:不要做独立的版本。我只有轶事推理,但它使事情更混乱,更难跟踪你的包的演变。毕竟,尽管它是单独发布的,但它仍然是一个单独的项目,因此看到版本号一起移动是有意义的。