react native universal monorepo

Reagieren Sie native universelle Monorepo

Ein Meinungsansatz zur Unterstützung mehrerer Plattformen mit React Native unter Verwendung eines Garn -Arbeitsbereichs Monorepo.

Schauen Sie sich überall mit React React React Native an, um eine eingehende Anleitung zu haben, wie und warum ich diesen Ansatz ausprobieren kann, wenn Sie vorhaben, mehrere Plattformen in Ihrer App zu unterstützen.

• Überblick
• Garn -Arbeitsbereiche Monorepo -Setup
• Android & iOS
• Windows & macos
• Das Web
• Browser -Erweiterungen & Elektronen

Überblick

Dieser Monorepo verwendet Garnarbeitsbereiche und Typenkripte, um ein modulares Reaktionsprojekt zu unterstützen.

Die Kernidee besteht darin, den JavaScript -App -Code aus den Plattformkonfigurationen zu isolieren (nativer Code + Die App -Bundler wie Metro und WebPack).
Diese Isolierung erfolgt durch die Verwendung verschiedener Arbeitsbereiche: Wir haben einen app -Arbeitsbereich für den JavaScript -App -Code, einen mobile Arbeitsbereich für die native React -native mobile Konfiguration, einen macos -Arbeitsbereich für die React Native MacOS -Konfiguration usw.

Wir umfassen Garn nohoist voll und ganz, um die Verwendung verschiedener Versionen von React Native auf jeder Plattform (was empfohlen, aber nicht erforderlich ist) zu ermöglichen, wodurch die Einführung neuer React -native Updates vereinfacht wird.
Vielen Dank an NoHoist, jeder Plattform -Arbeitsbereich ( mobile , macos usw.) kann von einer reag -nativen Version abhängen, unabhängig davon, welche Version die anderen Plattform -Arbeitsbereiche verwenden. Zum Beispiel können wir [email protected] in der mobilen App und [email protected] in der MacOS-App verwenden-solange der JavaScript-App-Code beide Versionen unterstützt.
Dieser Ansatz fördert allmähliche Reaktionen native Updates über Updates in Lockstep.

Weitere Informationen finden Sie in "Running React Native überall: Garn -Arbeitsbereiche Monorepo -Setup".

Euen Bitte beachten Sie, dass ich nicht sage, dass dies der richtige Weg ist, um native Monorepos zu reagieren. Dies ist nur ein Ansatz, den ich gerne auf größeren Codebasen verwende :)

Unterstützte Plattformen

• Android (React Native 0,65)
• iOS (React Native 0,65)
• Windows (React Native 0,65)
• MacOS (React Native 0,63)
• Android TV (React Native 0,65)
• TVOS (React Native 0,65)
• Web (React Native 0,65)
• Web - Browsererweiterung (React Native 0,65)
• Web - Elektron (React Native 0,65)
• Web - Next.js (React Native 0,65)

Erste Schritte

Sie können dieses Repo als Kesselplatte verwenden und die Arbeitsbereiche von Plattformen entfernen, die Sie nicht benötigen, oder Sie können dieses Setup von Grund auf neu erstellen, wenn Sie genau verstehen möchten, wie es funktioniert.

Verwenden Sie dieses Repository als Kesselplatte

1. Klon das Repository: [email protected]:mmazzarolo/react-native-universal-monorepo.git
2. Führen Sie Garn Installation cd react-native-universal-monorepo && yarn

Erstellen Sie dieses Setup von Grund auf neu

Schritt -für -Schritt -Tutorial zum Erstellen dieses Repositorys von Grund auf:

• Überblick
• Garn -Arbeitsbereiche Monorepo -Setup
• Android & iOS
• Windows & macos
• Das Web
• Browser -Erweiterungen & Elektronen

Tutorial für den Fernseher und die nächsten.js -Plattformen von @theFinnomenon:

• Hinzufügen von TVOS & Android TV Support zu Monorepo
• Weiter.js in reagieren nativem Monorepo

Zusätzliche Ressourcen:

• Führen Sie Ihre React Native App im Web mit React Native for Web aus
• Erstellen einer Desktop -Anwendung mit Elektronen und Erstellen von React App
• Entwicklung einer Browser -Erweiterung mit der Create -React -App

Verfügbare Befehle

Befehle für Entwicklungs- und Erstellung:

• yarn android:metro : Starten Sie den Metro -Server für Android/iOS
• yarn android:start : Beginnen Sie mit der Entwicklung der Android -App
• yarn android:studio : Öffnen Sie die Android -App in Android Studio
• yarn ios:metro : Starten Sie den Metro -Server für Android/iOS
• yarn ios:start : Beginnen Sie mit der Entwicklung der iOS -App
• yarn ios:pods : Installieren Sie die Abhängigkeiten von iOS Cocoapods
• yarn ios:xcode : Öffnen Sie die iOS -App auf Xcode
• yarn macos:metro : Starten Sie den Metro -Server für macOS
• yarn macos:start : Beginnen Sie mit der Entwicklung der MacOS -App
• yarn macos:pods : Installieren Sie die Abhängigkeiten von MacOS Cocoapods
• yarn macos:xcode : Öffnen Sie die MacOS -App auf Xcode
• yarn web:start : Beginnen Sie mit der Entwicklung der Web -App
• yarn web:build : Erstellen Sie einen Produktionsaufbau der Web -App
• yarn electron:start : Beginnen Sie mit der Entwicklung der Elektronen -App
• yarn electron:package:mac : Verpacken Sie die Produktion Binärd der Elektronen -App für macOS
• yarn electron:package:win : Verpacken Sie die Produktion Binary der Elektronen -App für Windows
• yarn electron:package:linux : Verpacken Sie die Produktion Binärd der Elektronen -App für Linux
• yarn browser-ext:start : Beginnen Sie mit der Entwicklung der Browser-Erweiterung
• yarn browser-ext:build : Erstellen Sie einen Produktionsaufbau der Browsererweiterung
• yarn windows:metro : Starten Sie den Metro -Server für Windows
• yarn windows:start : Beginnen Sie mit der Entwicklung der Windows -App
• yarn tv:android:metro : Starten Sie den Metro -Server für Android TV
• yarn tv:android:start : Beginnen Sie mit der Entwicklung der Android -TV -App
• yarn tv:android:studio : Öffnen Sie die Android -TV -App in Android Studio
• yarn tv:tvos:metro : Starten Sie den Metro -Server für TVOS
• yarn tv:tvos:start : Starten Sie die TVOS -App weiterentwickeln
• yarn tv:tvos:xcode : Öffnen Sie die TVOS -App in Xcode
• yarn tv:tvos:pods : Installieren Sie TVOS Cocoapods Abhängigkeiten
• yarn next:start : Starten Sie die nächste.js -App
• yarn next:build : Erstellen Sie die nächste.js -App
• yarn next:serve : Servieren Sie die nächste. Js App Build

Andere Befehle (wir verwenden Ultra-Runner, um diese Befehle auf allen Arbeitsbereichen auszuführen):

• yarn lint : FINT Jedes Projekt
• yarn lint:fix : Lint + Fix jedes Projekt
• yarn test : Führen Sie die Tests jedes Projekts aus
• yarn typecheck : Führen Sie das Typ-Skript-Typ-Überprüfungen für jedes Projekt aus

Einheimische Abhängigkeiten

Während Sie an einem monorepo an React-Native arbeiten, werden Sie feststellen, dass mehrere Pakete beim Heizen nicht richtig funktionieren-entweder weil sie nativ miteinander verbunden sein müssen oder weil sie zweimal gebündelt werden und den Build brechen (z. B. react , react-dom ).
Dies ist kein Problem mit dem in diesem Projekt verwendeten Ansatz an sich. Es ist eher ein häufiges Problem mit Monorepos.

Um diese Probleme zu beheben, markieren wir sie als Nohoist, sodass sie in jedem Paket installiert werden, das von ihnen abhängt.

In diesem Monorepo sehen Sie ein Beispiel für solche Bibliotheken in react-native-async-storage .

In den im Monorepo verwendeten Metro-Bundler- und Webpack-Konfigurationen verwenden wir eine Reihe von Build-Tools, um sicherzustellen, dass noHoisted-Pakete korrekt aufgelöst werden.
Solange Sie diese Bibliotheken zur nohoist Liste hinzufügen, sollten Sie gut gehen?

Garn klassisch gegen Garn 2+

Wir bemühen uns, dieses Setup mit Garn Classic kompatibel zu machen - aber mit ein paar Änderungen ist es auch mit Garn 2+ kompatibel (bietet alle Garn 2+ -Vorteile).
Weitere Informationen finden Sie in #22.

Garn 2+ einrichten

1. Führen Sie yarn set version berry am Projekt. Es erstellt eine .yarnrc.yml -Datei.
2. Fügen Sie .yarnrc.yml die folgenden Zeilen hinzu, um sicherzustellen, dass die Verzeichnisse node_modules in jedem Arbeitsbereich erstellt werden:

 nodeLinker : node-modules
nmHoistingLimits : workspaces

3. nmHositingLimits gibt an, wie man Abhängigkeiten für jeden Arbeitsbereich hebt. Durch Einstellen in workspaces werden alle Abhängigkeiten in den node_modules jedes Arbeitsbereichs installiert, anstatt in den Stammordner gehockt zu werden. Dies bedeutet, dass Sie jetzt den noHoist Abschnitt im Root package.json sicher.json sicher können.

Weitere Informationen finden Sie in Yarn 2+'s "Erste Schritte".

Bekannte Probleme

In einigen Fällen kann Yarn Classic nicht in der Lage sein, Abhängigkeiten mit einer peerDependency für react-native zu beheben.
Siehe #22 für ein paar Problemumgehungen. Eine Lösung für das react-native-monorepo-tools Repo ist in der Arbeit.

Beitragen

Beiträge, Diskussionen und Feedback sind willkommen! Bitte fragen Sie, ob es aktive Pläne für Feature -Änderungen gibt, bevor Sie neue PRs einreichen.