React 和 React Native 之间的代码共享

Posted 2023-03-13

【中文标题】React 和 React Native 之间的代码共享

【英文标题】：Code Sharing between React and React Native

【发布时间】：2021-04-06 11:59:08

【问题描述】：

我正在尝试找到一种在 Types 和 Redux Stores 等项目之间共享代码的好方法。我见过的最好的 3 种方法是：

Npm 包 - 创建一个私有包。

但是如果我想在开发过程中更改 npm 包中的某些内容，我该怎么做？

Git 子模块

我发现这种方法会产生一些副作用。

复制/粘贴

我现在的做法 xD .. 但真的很糟糕，因为我必须多次更改相同的内容并且会忘记我所做的更改..

你会如何解决这个问题？

【参考方案1】：

您可以使用npm-link cli 在本地安装您的包，而不是直接部署到 npmjs.com，然后当您在开发过程中需要进行更改时，它们会自动更新到您的项目中

【讨论】：

嗯，很有趣。我必须为每个环境链接它还是只链接一次？

@Muhaki 你必须为你使用它的每个环境链接它，但你可以使用托管的 git repo 来更新每个“副本”

谢谢，我已经看到了一种使用 npm 链接和 git 子模块的方法，在那里您将拥有一个包含项目作为子模块的主存储库，因此您可以处理那个，但推送到项目本身。看起来很有趣，会进一步调查！

【参考方案2】：

这可能是 monorepo 的情况，解决方案类似于 NX 或 Lerna

您有一个存储库，其中包含多个应用程序以及它们共享的公共代码。这使得更新共享代码变得微不足道，因为它只在一个地方。

例如，在 NX 中，您的目录结构如下：

apps/
  website/ (React app)
  mobile-app/ (React native app)
  backend/ (Node.js Express app)
libs/
  common-utils/
  fancy-types/
  constants/

如果您想要共享库中的某些内容，您只需：

import  foo  from '@mymonoreponame/common-utils'

这是一个很大的变化，因此如果您希望将这些项目保存在单独的存储库中，此解决方案将无法为您提供帮助。但在遇到类似问题后，改用 NX monorepo 确实帮助了我的工作流程。

【讨论】：

我确实看过 NX 并且喜欢它。但是我遇到的问题是当我想部署一个项目时，我还必须安装所有不必要的依赖项。

这在技术上是正确的，但还不错，真的。 Webpack 只会打包每个 app/lib 实际使用的内容。所以它不像未使用的东西实际上包含在任何生产代码中。

谢谢，我真希望 NX 能完成这项工作。但是另一个问题是 CI/CD，我在 master 分支上触发构建到生产，它会破坏这个想法，因为如果我只对后端进行更改并推送那个，它也会触发其他所有内容：/ .

@Muhaki 我还没有设置这个，但也应该有一些工具：nx.dev/latest/react/guides/ci/distributed-builds。 NX 可以检测哪些库/应用程序受到特定更改的影响，并且 CI 可以配置为仅运行那些