react native universal monorepo

反应本地通用monorepo

使用纱线工作空间MonorePo来支持多个平台的意见方法。

查看无处不在的React Native，以获取有关如何以及为什么建议您支持应用程序中多个平台的深入指南。

• 概述
• 纱线工作区MonorePo设置
• Android＆iOS
• Windows＆MacOS
• 网络
• 浏览器扩展和电子

概述

该MonorePo使用纱线工作区和打字稿来支持模块化反应本机项目。

核心想法是将JavaScript应用程序代码与平台配置隔离（本机代码 + App Bundlers，例如Metro和WebPack）。
这种隔离是通过使用不同的工作空间发生的：我们有一个用于JavaScript应用程序代码的app空间，一个用于React Native Mobile配置的mobile工作区，一个用于React Native MacOS配置的macos工作区等。

我们完全拥抱纱线nohoist ，允许在每个平台上使用不同版本的React本机（建议但不需要），从而简化了采用新的React本机更新。
感谢Nohoist，每个平台工作区（ mobile ， macos等）都可以取决于任何React Native版本，而不管其他平台工作区使用哪个版本。例如，只要JavaScript App代码支持这两个版本，我们可以在移动应用程序上使用[email protected]和MacOS应用程序上的[email protected] 。
这种方法通过锁定的更新来促进渐进的本机更新。

有关更多详细信息，请查看“无处不在的React Antial：纱线工作区MonorePo设置”。

配x请注意，我并不是说这是做反应本地莫诺波斯的正确方法。这只是我喜欢在较大代码库上使用的一种方法:)

支持的平台

• Android（反应天然0.65）
• iOS（反应天然0.65）
• Windows（反应本机0.65）
• macOS（反应天然0.63）
• Android TV（反应本机0.65）
• TVO（反应本机0.65）
• Web（React Native 0.65）
• Web-浏览器扩展（React Native 0.65）
• 网络 - 电子（反应天然0.65）
• web- next.js（反应本机0.65）

入门

您可以将此存储库用作样板，删除您不需要的平台的工作区，也可以如果您想完全了解其工作原理，则可以从头开始创建此设置。

使用此存储库作为样板

1. 克隆存储库： [email protected]:mmazzarolo/react-native-universal-monorepo.git
2. 运行纱线安装cd react-native-universal-monorepo && yarn

从头开始创建此设置

从头开始创建此存储库的逐步教程：

• 概述
• 纱线工作区MonorePo设置
• Android＆iOS
• Windows＆MacOS
• 网络
• 浏览器扩展和电子

@thefinnomenon的电视和Next.js平台教程：

• 向MonorePo添加TVOS和Android电视支持
• next.js在反应元中

其他资源：

• 使用React Antial用于Web，在网络上运行您的React本地应用程序
• 使用电子构建桌面应用程序并创建React应用程序
• 使用Create React应用开发浏览器扩展程序

可用命令

开发和构建命令：

• yarn android:metro ：启动用于Android/ios的地铁服务器
• yarn android:start ：开始开发Android应用程序
• yarn android:studio ：在Android Studio上打开Android应用程序
• yarn ios:metro ：启动用于Android/ios的Metro服务器
• yarn ios:start ：开始开发iOS应用程序
• yarn ios:pods ：安装iOS CocoApods依赖关系
• yarn ios:xcode ：在Xcode上打开iOS应用程序
• yarn macos:metro ：启动Macos的Metro服务器
• yarn macos:start ：开始开发MacOS应用程序
• yarn macos:pods ：安装MacOS CocoApods依赖关系
• yarn macos:xcode ：在Xcode上打开MacOS应用程序
• yarn web:start ：开始开发网络应用程序
• yarn web:build ：创建网络应用程序的生产构建
• yarn electron:start ：开始开发电子应用
• yarn electron:package:mac ：包装MacOS电子应用的生产二进制
• yarn electron:package:win ：包装Windows电子应用的生产二进制
• yarn electron:package:linux ：包装Linux电子应用的生产二进制
• yarn browser-ext:start ：开始开发浏览器扩展程序
• yarn browser-ext:build ：创建浏览器扩展程序的生产构建
• yarn windows:metro ：启动Windows的Metro服务器
• yarn windows:start ：开始开发Windows应用程序
• yarn tv:android:metro ：为Android TV启动地铁服务器
• yarn tv:android:start ：开始开发Android TV应用程序
• yarn tv:android:studio ：在Android Studio中打开Android TV应用程序
• yarn tv:tvos:metro ：启动TVOS的地铁服务器
• yarn tv:tvos:start ：开始开发TVOS应用程序
• yarn tv:tvos:xcode ：在Xcode中打开TVOS应用程序
• yarn tv:tvos:pods ：安装TVOS CocoApods依赖
• yarn next:start ：start the Next.js应用程序
• yarn next:build ：build the next.js应用
• yarn next:serve ：服务next.js应用程序构建

其他命令（我们使用Ultra-runner在所有工作空间上运行这些命令）：

• yarn lint ：棉绒每个项目
• yarn lint:fix ：棉绒 +修复每个项目
• yarn test ：运行每个项目的测试
• yarn typecheck ：在每个项目上运行打字稿类型检查

本地依赖性

在MonorePo中使用React Native时，您会注意到吊装时有几个软件包无法正常工作 - 要么是因为它们需要本地链接，要么是因为它们最终被捆绑了两次，破坏了构建（例如， react ， react-dom ）。
这不是该项目本身使用的方法的问题。这是Monorepos的常见问题。

为了解决这些问题，我们将它们标记为NoHoist，因此它们将安装在每个取决于它们的软件包中。

在此MonorePo中，您可以在react-native-async-storage中看到此类库的示例。

在MonorePo上使用的Metro Bundler和WebPack配置中，我们使用一组构建工具来确保正确解决了NohoSist的软件包。
因此，只要您将这些图书馆添加到nohoist列表中，您就应该好吗？

纱线经典vs纱2+

我们正在努力使此设置与纱线经典兼容 - 但是，通过一些调整，它也与纱2+兼容（提供所有纱线2+的好处）。
有关更多信息，请参见＃22。

设置纱2+

1. 在项目的根部运行yarn set version berry 。它将创建一个.yarnrc.yml文件。
2. 将以下行添加到.yarnrc.yml ，以确保每个工作区中都创建了node_modules目录：

 nodeLinker : node-modules
nmHoistingLimits : workspaces

3. nmHositingLimits告诉如何为每个工作区提起依赖。通过将其设置为workspaces所有依赖关系都将安装在每个工作区的node_modules中，而不是将其吊到根文件夹中。这意味着您现在可以安全地在root的package.json中安全noHoist部分。

查看Yarn 2+的“入门”指南以获取更多信息。

已知问题

在某些情况下，纱线经典将无法正确解决对react-native具有peerDependency依赖性。
有关一些解决方法，请参见＃22。在工作中，正在对react-native-monorepo-tools存储库进行修复。

贡献

欢迎贡献，讨论和反馈！请询问提交新PR之前是否有有关功能更改的积极计划？