react native universal monorepo

React Native Universal Monorepo

Un enfoque de opinión para apoyar múltiples plataformas con React Native utilizando un monoreo de espacios de trabajo de hilados.

Consulte Running React Native en todas partes para obtener una guía en profundidad sobre cómo y por qué recomiendo probar este enfoque si planea admitir múltiples plataformas en su aplicación.

• Descripción general
• Configuración de Monorepo en espacios de trabajo de hilo
• Android e iOS
• Windows y MacOS
• La web
• Extensiones y electrones del navegador

Descripción general

Este Monorepo utiliza espacios de trabajo de hilo y mecanografiado para admitir un proyecto nativo de React modular.

La idea central es aislar el código de la aplicación JavaScript de las configuraciones de la plataforma (código nativo + los agrupadores de aplicaciones como Metro y Webpack).
Este aislamiento ocurre utilizando diferentes espacios de trabajo: tenemos un espacio de trabajo app para el código de aplicación JavaScript, un espacio de trabajo mobile para la configuración móvil React Native, un espacio de trabajo macos para la configuración de macOS nativa React, etc.

Adoptamos completamente nohoist del hilo para permitir el uso de diferentes versiones de React Native en cada plataforma (lo que se recomienda pero no es necesario), simplificando la adopción de nuevas actualizaciones de React Native.
Gracias Nohoist, cada espacio de trabajo de plataforma ( mobile , macos , etc.) puede depender de cualquier versión nativa de React, independientemente de la versión que los otros espacios de trabajo de la plataforma estén utilizando. Por ejemplo, podemos usar [email protected] en la aplicación móvil y [email protected] en la aplicación MacOS, siempre que el código de la aplicación JavaScript admita ambas versiones.
Este enfoque promueve las actualizaciones nativas de reacción gradual sobre las actualizaciones en Lockstep.

Para obtener más detalles, consulte "Ejecutar React Native en todas partes: Configuración de Monorepo en espacios de trabajo de hilos".

️ Tenga en cuenta que no estoy diciendo que esta es la forma correcta de hacer reaccionamiento de Monorepos nativos. Este es solo un enfoque que disfruto usando en bases de código más grandes :)

Plataformas compatibles

• Android (React Native 0.65)
• iOS (React Native 0.65)
• Windows (reaccionando nativo 0.65)
• MacOS (React Native 0.63)
• Android TV (React Native 0.65)
• tvos (React Native 0.65)
• Web (React Native 0.65)
• Web - Extensión del navegador (React Native 0.65)
• Web - Electron (React Native 0.65)
• Web - Next.js (React Native 0.65)

Empezando

Puede usar este repositorio como una placa, eliminando los espacios de trabajo de las plataformas que no necesita, o puede crear esta configuración desde cero si desea comprender completamente cómo funciona.

Usando este repositorio como una palerla

1. Clone the Repository: [email protected]:mmazzarolo/react-native-universal-monorepo.git
2. Ejecutar hilo instalar cd react-native-universal-monorepo && yarn

Crea esta configuración desde cero

Tutorial paso a paso sobre la creación de este repositorio desde cero:

• Descripción general
• Configuración de Monorepo en espacios de trabajo de hilo
• Android e iOS
• Windows y MacOS
• La web
• Extensiones y electrones del navegador

Tutorial para las plataformas TV y NEXT.JS de @TheFinnomenon:

• Agregar soporte de TV TVOS y Android a Monorepo
• Next.js en react-nativo monorepo

Recursos adicionales:

• Ejecute su aplicación Native React en la web con React Native for Web
• Creación de una aplicación de escritorio usando Electron y Crear aplicación React
• Desarrollo de una extensión del navegador con la aplicación Crear React

Comandos disponibles

Comandos de desarrollo y construcción:

• yarn android:metro : Inicie el servidor Metro para Android/iOS
• yarn android:start : comience a desarrollar la aplicación Android
• yarn android:studio : Abra la aplicación Android en Android Studio
• yarn ios:metro : Inicie el servidor Metro para Android/iOS
• yarn ios:start : comience a desarrollar la aplicación iOS
• yarn ios:pods : instalar dependencias de iOS Cocoapods
• yarn ios:xcode : abra la aplicación iOS en xcode
• yarn macos:metro : inicie el servidor de metro para macOS
• yarn macos:start : comience a desarrollar la aplicación MacOS
• yarn macos:pods : instalar dependencias de Cocoapods de MacOS
• yarn macos:xcode : Abra la aplicación MacOS en Xcode
• yarn web:start : comenzar a desarrollar la aplicación web
• yarn web:build : cree una compilación de producción de la aplicación web
• yarn electron:start : comience a desarrollar la aplicación Electron
• yarn electron:package:mac : Empaque el binario de producción de la aplicación Electron para macOS
• yarn electron:package:win : Empaque el binario de producción de la aplicación Electron para Windows
• yarn electron:package:linux : Empaque el binario de producción de la aplicación Electron para Linux
• yarn browser-ext:start : comenzar a desarrollar la extensión del navegador
• yarn browser-ext:build : Crear una compilación de producción de la extensión del navegador
• yarn windows:metro : inicie el servidor de metro para Windows
• yarn windows:start : comience a desarrollar la aplicación Windows
• yarn tv:android:metro : Inicie el servidor Metro para Android TV
• yarn tv:android:start : Comience a desarrollar la aplicación Android TV
• yarn tv:android:studio : Abra la aplicación Android TV en Android Studio
• yarn tv:tvos:metro : Inicie el servidor de metro para TVOS
• yarn tv:tvos:start : Comience a desarrollar la aplicación TVOS
• yarn tv:tvos:xcode : Abra la aplicación TVOS en Xcode
• yarn tv:tvos:pods : Instalar Dependencias de Cocoapods de TVOS
• yarn next:start : Inicie la aplicación Next.js
• yarn next:build : Build the Next.js App
• yarn next:serve : servir la compilación de la aplicación Next.js

Otros comandos (usamos Ultra-Runner para ejecutar estos comandos en todos los espacios de trabajo):

• yarn lint : pelusa cada proyecto
• yarn lint:fix : pelusa + arreglar cada proyecto
• yarn test : ejecutar pruebas de cada proyecto
• yarn typecheck : ejecute el tipo de comprobación de tipo mecanografiado en cada proyecto

Dependencias nativas

Mientras trabaja en React Native en un Monorepo, notará que varios paquetes no funcionarán correctamente cuando se iban, ya sea porque necesitan estar de forma nativa o porque terminan siendo agrupados dos veces, rompiendo la construcción (por ejemplo, react , react-dom ).
Este no es un problema con el enfoque utilizado en este proyecto per se. Es más un problema común con los Monorepos.

Para solucionar estos problemas, los marcamos como nohoist, por lo que se instalarán en cada paquete que depende de ellos.

En este monoreso, puede ver un ejemplo de tales bibliotecas en react-native-async-storage .

En las configuraciones de Metro Bundler y Webpack utilizadas en todo el Monorepo, estamos utilizando un conjunto de herramientas de construcción para garantizar que los paquetes no vacíos se resuelvan correctamente.
Entonces, mientras agregue estas bibliotecas a la lista nohoist , ¿debería estar listo para comenzar?

Hilo clásico vs hilo 2+

Nos esforzamos por hacer que esta configuración sea compatible con Yarn Classic, pero, con algunos ajustes, también es compatible con Yarn 2+ (proporcionando todos los beneficios de Yarn 2+).
Ver #22 para obtener más información.

Configuración del hilo 2+

1. Ejecute yarn set version berry en la raíz del proyecto. Creará un archivo .yarnrc.yml .
2. Agregue las siguientes líneas a .yarnrc.yml para garantizar que los directorios node_modules se creen en cada espacio de trabajo:

 nodeLinker : node-modules
nmHoistingLimits : workspaces

3. nmHositingLimits dice cómo izar dependencias para cada espacio de trabajo. Al configurarlo en workspaces todas las dependencias se instalarán en el node_modules de cada espacio de trabajo en lugar de ser elevados a la carpeta raíz. Esto significa que ahora puede que pueda de manera segura la sección noHoist en el package.json de raíz.json.

Echa un vistazo a la guía "Presentando" de Yarn 2+para obtener más información.

Problemas conocidos

En algunos casos, Yarn Classic no podrá resolver las dependencias correctas que tienen una peerDependency en react-native .
Ver #22 para ver algunas soluciones. Una solución en el repositorio react-native-monorepo-tools está en el trabajo.

Que contribuye

¡Las contribuciones, las discusiones y los comentarios son bienvenidos! Pregunte si hay planes activos en los cambios de características antes de enviar nuevos PR.