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之前是否有有關功能更改的積極計劃？