react native universal monorepo

React natif universel monorepo

Une approche d'opinion pour prendre en charge plusieurs plates-formes avec React Native à l'aide d'un Yarn Workspaces Monorepo.

Consultez Running React Native Everywhered pour un guide approfondi sur la façon et pourquoi je recommande d'essayer cette approche si vous prévoyez de prendre en charge plusieurs plateformes de votre application.

• Aperçu
• Configuration de monorepo
• Android et iOS
• Windows & macOS
• Le web
• Extensions du navigateur et électron

Aperçu

Ce monorepo utilise des espaces de travail YARN et TypeScript pour prendre en charge un projet modulaire React Native.

L'idée principale est d'isoler le code d'application JavaScript à partir des configurations de la plate-forme (code natif + les regroupements de l'application comme Metro et WebPack).
Cet isolement se produit en utilisant différents espaces de travail: nous avons un espace de travail app pour le code d'application JavaScript, un espace de travail mobile pour la configuration mobile native React, un espace de travail macos pour la configuration de React Native MacOS, etc.

Nous adoptons pleinement nohoist YARN pour permettre d'utiliser différentes versions de React Native sur chaque plate-forme (qui est recommandée mais non requise), simplifiant l'adoption de nouvelles mises à jour natives React.
Merci à Nohoist, chaque espace de travail de plate-forme ( mobile , macos , etc.) peut dépendre de n'importe quelle version native React, quelle que soit la version que les autres espaces de travail de plate-forme utilisent. Par exemple, nous pouvons utiliser [email protected] sur l'application mobile et [email protected] sur l'application macOS - tant que le code d'application JavaScript prend en charge les deux versions.
Cette approche favorise les mises à jour progressives de Reate REAC sur les mises à jour dans Lockstep.

Pour plus de détails, consultez "Running React Native Everywhere: Yarn Workspaces Monorepo Configuration".

️ Veuillez noter que je ne dis pas que c'est la bonne façon de réagir à réagir Monorepos indigène. Ceci est juste une approche que j'aime utiliser sur des bases de code plus grandes :)

Plates-formes prises en charge

• Android (React Native 0.65)
• iOS (React natif 0,65)
• Windows (React natif 0,65)
• MacOS (React natif 0,63)
• Android TV (React natif 0,65)
• tvOS (React natif 0,65)
• Web (React natif 0,65)
• Web - Extension du navigateur (React Native 0.65)
• Web - Electron (React natif 0,65)
• Web - next.js (React natif 0,65)

Commencer

Vous pouvez utiliser ce référentiel comme passe-partout, en supprimant les espaces de travail des plates-formes dont vous n'avez pas besoin, ou vous pouvez créer cette configuration à partir de zéro si vous souhaitez bien comprendre comment cela fonctionne.

Utilisation de ce référentiel comme chauffe-plaque

1. Clone The Repository: [email protected]:mmazzarolo/react-native-universal-monorepo.git
2. Exécuter le fil Installer cd react-native-universal-monorepo && yarn

Créez cette configuration à partir de zéro

Tutoriel étape par étape sur la création de ce référentiel à partir de zéro:

• Aperçu
• Configuration de monorepo
• Android et iOS
• Windows & macOS
• Le web
• Extensions du navigateur et électron

Tutoriel pour les plates-formes TV et Next.js de @TheFinnomenon:

• Ajout de la prise en charge de TVOS & Android TV à Monorepo
• Next.js dans React-Native Monorepo

Ressources supplémentaires:

• Exécutez votre application React Native sur le Web avec React Native pour Web
• Construire une application de bureau à l'aide d'électron et créer l'application React
• Développement d'une extension de navigateur avec Create React App

Commandes disponibles

Commandes de développement et de construction:

• yarn android:metro : Démarrez le serveur de métro pour Android / iOS
• yarn android:start : commencez à développer l'application Android
• yarn android:studio : Ouvrez l'application Android sur Android Studio
• yarn ios:metro : Démarrez le serveur de métro pour Android / iOS
• yarn ios:start : commencez à développer l'application iOS
• yarn ios:pods : Installez les dépendances iOS Cocoapods
• yarn ios:xcode : Ouvrez l'application iOS sur Xcode
• yarn macos:metro : Démarrez le serveur de métro pour macOS
• yarn macos:start : commencez à développer l'application macOS
• yarn macos:pods : Installez les dépendances de macOS Cocoapods
• yarn macos:xcode : ouvrez l'application macOS sur xcode
• yarn web:start : commencez à développer l'application Web
• yarn web:build : créez une génération de production de l'application Web
• yarn electron:start : commencez à développer l'application Electron
• yarn electron:package:mac : Package Le binaire de production de l'application électronique pour macOS
• yarn electron:package:win : Emballer le binaire de production de l'application Electron pour Windows
• yarn electron:package:linux : Package Le binaire de production de l'application Electron pour Linux
• yarn browser-ext:start : Commencez à développer l'extension du navigateur
• yarn browser-ext:build : Créez une construction de production de l'extension du navigateur
• yarn windows:metro : Démarrez le serveur de métro pour Windows
• yarn windows:start : commencez à développer l'application Windows
• yarn tv:android:metro : Démarrez le serveur de métro pour Android TV
• yarn tv:android:start : Commencez à développer l'application Android TV
• yarn tv:android:studio : Ouvrez l'application Android TV dans Android Studio
• yarn tv:tvos:metro : Démarrez le serveur de métro pour TVOS
• yarn tv:tvos:start : Commencez à développer l'application TVOS
• yarn tv:tvos:xcode : Ouvrez l'application TVOS dans Xcode
• yarn tv:tvos:pods : Installez les dépendances TVOS Cocoapods
• yarn next:start : Démarrez l'application suivante.js
• yarn next:build : construire l'application suivante.js
• yarn next:serve : servir la construction de l'application suivante

Autres commandes (nous utilisons un ultra-coureur pour exécuter ces commandes sur tous les espaces de travail):

• yarn lint : peluche à chaque projet
• yarn lint:fix : Lint + Correction de chaque projet
• yarn test : effectuez des tests de chaque projet
• yarn typecheck : Exécutez le type de type TypeScript sur chaque projet

Dépendances natives

Tout en travaillant sur React Native dans un Monorepo, vous remarquerez que plusieurs packages ne fonctionneront pas correctement lorsqu'ils sont hissés - soit parce qu'ils doivent être liés nativement ou parce qu'ils finissent par être regroupés deux fois, brisant la construction (par exemple, react , react-dom ).
Ce n'est pas un problème avec l'approche utilisée dans ce projet en soi. C'est plus un problème commun avec Monorepos.

Pour résoudre ces problèmes, nous les marquons comme nohoist, afin qu'ils soient installés dans chaque package qui en dépend.

Dans ce monorepo, vous pouvez voir un exemple de ces bibliothèques dans react-native-async-storage .

Dans les configurations Metro Bundler et WebPack utilisées dans le monorepo, nous utilisons un ensemble de build-tools pour garantir que les packages nohoist sont résolus correctement.
Donc, tant que vous ajoutez ces bibliothèques à la liste nohoist , vous devriez être prêt à partir?

Yarn Classic vs Yarn 2+

Nous nous efforçons de rendre cette configuration compatible avec Yarn Classic - mais, avec quelques ajustements, il est également compatible avec Yarn 2+ (offrant tous les avantages de YarN 2+).
Voir # 22 pour plus d'informations.

Configuration du fil 2+

1. Exécutez yarn set version berry à la racine du projet. Il créera un fichier .yarnrc.yml .
2. Ajoutez les lignes suivantes à .yarnrc.yml pour vous assurer que les répertoires node_modules sont tous créés dans chaque espace de travail:

 nodeLinker : node-modules
nmHoistingLimits : workspaces

3. nmHositingLimits raconte comment hisser les dépendances pour chaque espace de travail. En le définissant sur workspaces toutes les dépendances seront installées dans node_modules de chaque espace de travail plutôt que d'être hissées dans le dossier racine. Cela signifie que vous pouvez maintenant que vous pouvez maintenant la section noHoist dans le package.json de la racine.json.

Consultez le guide "Getting Starting" de Yarn 2 + pour plus d'informations.

Problèmes connus

Dans certains cas, Yarn Classic ne sera pas en mesure de résoudre correctement les dépendances qui ont une peerDependency sur react-native .
Voir # 22 pour quelques solutions de contournement. Un correctif sur le repo react-native-monorepo-tools est sur le travail.

Contributif

Les contributions, les discussions et les commentaires sont les bienvenus! Veuillez demander s'il y a des plans actifs sur les modifications des fonctionnalités avant de soumettre de nouveaux PR?