react native universal monorepo

Reagir monorepo universal nativo

Uma abordagem opinativa para apoiar várias plataformas com o React Native usando um Monorepo de Espaços de Trabalho de Yarn.

Confira a execução do React Native em todos os lugares para obter um guia aprofundado sobre como e por que eu recomendo experimentar essa abordagem se você planeja suportar várias plataformas em seu aplicativo.

• Visão geral
• Espaços de trabalho de fio MONOREPO Configuração
• Android e iOS
• Windows e MacOS
• A web
• Extensões e elétrons do navegador

Visão geral

Este Monorepo usa espaços de trabalho de fio e digitadores para suportar um projeto nativo de React modular.

A idéia principal é isolar o código do aplicativo JavaScript das configurações da plataforma (código nativo + os pacotes de aplicativos como Metro e Webpack).
Esse isolamento acontece usando diferentes espaços de trabalho: temos um espaço de trabalho app para o código do aplicativo JavaScript, um espaço de trabalho mobile para a configuração de trabalho móvel no React, um espaço de trabalho macos para a configuração do React Native MacOS e assim por diante.

Nós adotamos totalmente o fio nohoist para permitir o uso de diferentes versões do React Native em cada plataforma (que é recomendada, mas não é necessária), simplificando a adoção de novas atualizações nativas do React.
Obrigado NoHoist, cada espaço de trabalho da plataforma ( mobile , macos etc.) pode depender de qualquer versão nativa do React, independentemente da versão que as outras plataformas de trabalho estão usando. Por exemplo, podemos usar [email protected] no aplicativo móvel e [email protected] no aplicativo MacOS-desde que o código do aplicativo JavaScript suportar as duas versões.
Essa abordagem promove as atualizações nativas do React Gradual sobre as atualizações no Lockstep.

Para obter mais detalhes, confira "React em execução Native em todos os lugares: Yarn Workspaces Monorepo Setup".

️ Observe que não estou dizendo que esta é a maneira certa de reagir monorepos nativos. Esta é apenas uma abordagem que eu gosto de usar em bases de código maiores :)

Plataformas suportadas

• Android (React Native 0.65)
• iOS (React Native 0.65)
• Windows (React Native 0.65)
• MacOS (React Native 0.63)
• TV Android (react nativo 0.65)
• TvOS (React Native 0.65)
• Web (react nativo 0.65)
• Web - Extensão do navegador (React Native 0.65)
• Web - Electron (React Native 0.65)
• Web - Next.js (reage nativo 0.65)

Começando

Você pode usar esse repositório como um caldeira, removendo os espaços de trabalho das plataformas que você não precisa, ou pode criar essa configuração do zero se quiser entender completamente como ela funciona.

Usando este repositório como um caldeira

1. Clone o repositório: [email protected]:mmazzarolo/react-native-universal-monorepo.git
2. Run Install cd react-native-universal-monorepo && yarn

Crie esta configuração do zero

Tutorial passo a passo sobre como criar este repositório do zero:

• Visão geral
• Espaços de trabalho de fio MONOREPO Configuração
• Android e iOS
• Windows e MacOS
• A web
• Extensões e elétrons do navegador

Tutorial para as plataformas de TV e Next.js de @thefinnomenon:

• Adicionando suporte de TV TvOS e Android a Monorepo
• Next.js em Monorepo de React-native

Recursos adicionais:

• Execute seu aplicativo nativo do React na web com o React Native for Web
• Construindo um aplicativo de desktop usando elétron e criar um aplicativo React
• Desenvolvendo uma extensão do navegador com o aplicativo Create React

Comandos disponíveis

Desenvolvimento e construção de comandos:

• yarn android:metro : Inicie o servidor metropol
• yarn android:start : Comece a desenvolver o aplicativo Android
• yarn android:studio : Abra o aplicativo Android no Android Studio
• yarn ios:metro : Inicie o servidor metropolista para Android/iOS
• yarn ios:start : comece a desenvolver o aplicativo iOS
• yarn ios:pods : Instale as dependências do iOS Cocoapods
• yarn ios:xcode : Abra o aplicativo iOS no xcode
• yarn macos:metro : Inicie o servidor metro para macOS
• yarn macos:start : Comece a desenvolver o aplicativo MacOS
• yarn macos:pods : Instale as dependências do MacOS Cocoapods
• yarn macos:xcode : Abra o aplicativo MacOS no Xcode
• yarn web:start : comece a desenvolver o aplicativo da web
• yarn web:build : Crie uma construção de produção do aplicativo da web
• yarn electron:start : Comece a desenvolver o aplicativo Electron
• yarn electron:package:mac : Pacote o Binário de Produção do App Electron para MacOS
• yarn electron:package:win : Package the Production Binary of the Electron App for Windows
• yarn electron:package:linux : Pacote o binário de produção do aplicativo Electron para Linux
• yarn browser-ext:start : Comece a desenvolver a extensão do navegador
• yarn browser-ext:build : Crie uma construção de produção da extensão do navegador
• yarn windows:metro : inicie o servidor do metrô para Windows
• yarn windows:start : comece a desenvolver o aplicativo Windows
• yarn tv:android:metro : inicie o servidor metropol
• yarn tv:android:start : Comece a desenvolver o aplicativo Android TV
• yarn tv:android:studio : Abra o aplicativo de TV Android no Android Studio
• yarn tv:tvos:metro : Inicie o servidor metro
• yarn tv:tvos:start : Comece a desenvolver o aplicativo TvOS
• yarn tv:tvos:xcode : Abra o aplicativo TvOS no Xcode
• yarn tv:tvos:pods : Instale as dependências dos Cocoapods de TvOS
• yarn next:start : Inicie o App Next.js
• yarn next:build
• yarn next:serve

Outros comandos (usamos o Ultra-Runner para executar esses comandos em todos os espaços de trabalho):

• yarn lint : fiape cada projeto
• yarn lint:fix : fiapos + consertar cada projeto
• yarn test : Execute testes de cada projeto
• yarn typecheck

Dependências nativas

Enquanto trabalha no React Native em um monorepo, você notará que vários pacotes não funcionam corretamente quando içados-porque precisam estar ligados nativamente ou porque acabam sendo empacotados duas vezes, quebrando a construção (por exemplo, react , react-dom ).
Este não é um problema com a abordagem usada neste projeto em si. É mais um problema comum com monorepos.

Para corrigir esses problemas, marcamos como nohoist, para que eles sejam instalados em cada pacote que depende deles.

Neste monorepo, você pode ver um exemplo dessas bibliotecas no react-native-async-storage .

Nas configurações de Metro Poundler e Webpack usadas em todo o Monorepo, estamos usando um conjunto de ferramentas de construção para garantir que os pacotes nohoisted sejam resolvidos corretamente.
Então, desde que você adicione essas bibliotecas à lista nohoist , você deve estar pronto para ir?

Yarn Classic vs Yarn 2+

Estamos nos esforçando para tornar essa configuração compatível com o Yarn Classic - mas, com alguns ajustes, é compatível com o Yarn 2+ também (fornecendo todos os benefícios do Yarn 2+).
Veja #22 para mais informações.

Configurando o Yarn 2+

1. Execute yarn set version berry na raiz do projeto. Ele criará um arquivo .yarnrc.yml .
2. Adicione as seguintes linhas a .yarnrc.yml para garantir que os diretórios node_modules sejam todos criados em cada espaço de trabalho:

 nodeLinker : node-modules
nmHoistingLimits : workspaces

3. nmHositingLimits diz como içar dependências para cada espaço de trabalho. Ao defini -lo em workspaces todas as dependências serão instaladas na node_modules de cada espaço de trabalho, em vez de serem içadas na pasta raiz. Isso significa que agora você pode ser a seção noHoist no package.json da raiz.json.

Confira o Guia "Surpreendendo" do Yarn 2+para obter mais informações.

Questões conhecidas

Em alguns casos, o Yarn Classic não será capaz de resolver dependências corretamente que tenham uma peerDependency no react-native .
Veja #22 para algumas soluções alternativas. Uma correção no repartimento react-native-monorepo-tools está no trabalho.

Contribuindo

Contribuições, discussões e feedback são bem -vindos! Por favor, pergunte se existem planos ativos para alterações de recursos antes de enviar novos PRs?