react native universal monorepo

Отреагировать Native Universal Monorepo

Ознакомимый подход к поддержке нескольких платформ с REACT Native с использованием Yarn Workspaces Monorepo.

Проверьте запуск React Native повсюду для подробного руководства о том, как и почему я рекомендую попробовать этот подход, если вы планируете поддержать несколько платформ в вашем приложении.

• Обзор
• Yarn Workspaces Monorepo установка
• Android и iOS
• Windows & MacOS
• Интернет
• Расширения браузера и электрон

Обзор

Этот MonorePo использует рабочие пространства пряжи и TypeScript для поддержки модульного нативного проекта React.

Основная идея состоит в том, чтобы выделить код приложения JavaScript из конфигураций платформы (натуральный код + приложения, такие как Metro и WebPack).
Эта изоляция происходит с использованием различных рабочих пространств: у нас есть рабочее пространство app для кода приложения Javascript, mobile рабочее пространство для нативной конфигурации мобильной связи React, рабочее пространство macos для нативной конфигурации MacOS React и так далее.

Мы полностью используем nohoist чтобы позволить использовать различные версии Rayact Native на каждой платформе (которая рекомендуется, но не требуется), упрощая принятие новых нативных обновлений React.
Спасибо Nohoist, каждая платформа Workspace ( mobile , macos и т. Д.) Может зависеть от любой нативной версии React, независимо от того, какую версию использует другие рабочие пространства платформы. Например, мы можем использовать [email protected] в мобильном приложении и [email protected] в приложении MacOS-до тех пор, пока код приложения JavaScript поддерживает обе версии.
Этот подход способствует постепенному реагированию нативных обновлений по поводу обновлений в Lockstep.

Для получения более подробной информации ознакомьтесь с «Запуск RACE Native Anywhere: пряжа рабочие пространства Monorepo Setup».

️ Пожалуйста, обратите внимание, что я не говорю, что это правильный способ сделать Native Monorepos. Это просто подход, который мне нравится использовать на более крупных кодовых базах :)

Поддерживаемые платформы

• Android (реагировать нативные 0,65)
• iOS (реагировать натив 0,65)
• Windows (отреагируйте родные 0,65)
• MacOS (реагировать натив 0,63)
• Android TV (React Native 0,65)
• TVOS (React Native 0,65)
• Интернет (отреагировать родной 0,65)
• Интернет - расширение браузера (реагировать натив 0,65)
• Интернет - электрон (отреагировать нативно 0,65)
• Интернет - Next.js (реагировать натив 0,65)

Начиная

Вы можете использовать это репо в качестве шаблон, удаляя рабочие пространства платформ, которые вам не нужны, или вы можете создать эту настройку с нуля, если вы хотите полностью понять, как она работает.

Использование этого репозитория в качестве шаблона

1. Клон репозиторий: [email protected]:mmazzarolo/react-native-universal-monorepo.git
2. Запустить пряжу установку cd react-native-universal-monorepo && yarn

Создайте эту настройку с нуля

Пошаговое руководство по созданию этого хранилища с нуля:

• Обзор
• Yarn Workspaces Monorepo установка
• Android и iOS
• Windows & MacOS
• Интернет
• Расширения браузера и электрон

Учебник для платформ TV и Next.js от @TheFinnomenon:

• Добавление поддержки TVOS & Android TV в Monorepo
• Next.js в реагировании монорепо

Дополнительные ресурсы:

• Запустите свое приложение React Native в Интернете с React Native для Интернета
• Создание настольного приложения с использованием электрона и создания приложения React
• Разработка расширения браузера с помощью приложения Create React

Доступные команды

Команды разработки и сборки:

• yarn android:metro : запустите Metro Server для Android/iOS
• yarn android:start : Начните разработать приложение Android
• yarn android:studio : Откройте приложение Android на Android Studio
• yarn ios:metro : запустите Metro Server для Android/iOS
• yarn ios:start : Начните разрабатывать приложение для iOS
• yarn ios:pods : установить зависимости кокопод iOS
• yarn ios:xcode : Откройте приложение для iOS на XCode
• yarn macos:metro : запустите сервер Metro для macOS
• yarn macos:start : Начните разработать приложение MacOS
• yarn macos:pods : установить зависимости кокопод MacOS
• yarn macos:xcode : Откройте приложение MacOS на XCode
• 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 : запустите сервер Metro для Windows
• yarn windows:start : начните разработать приложение Windows
• yarn tv:android:metro : запустить сервер Metro для Android TV
• yarn tv:android:start : Начните разрабатывать приложение Android TV
• yarn tv:android:studio : Откройте приложение Android TV в Android Studio
• yarn tv:tvos:metro : запустить сервер Metro для TVOS
• yarn tv:tvos:start : Начните разрабатывать приложение TVOS
• yarn tv:tvos:xcode : Откройте приложение TVOS в XCODE
• yarn tv:tvos:pods : Установить зависимости кокопод TVOS
• yarn next:start : запустить приложение Next.js
• yarn next:build : строить приложение следующего.js
• yarn next:serve : Подавайте следующую сборку приложения.

Другие команды (мы используем Ultra-Runner для запуска этих команд во всех рабочих пространствах):

• yarn lint : пронзительно каждый проект
• yarn lint:fix : Lint + исправить каждый проект
• yarn test : запустить тесты каждого проекта
• yarn typecheck : запустите проверку типовой типов на каждом проекте

Коренные зависимости

Работая над Nate Native в Monorepo, вы заметите, что несколько пакетов не будут работать правильно при подъеме-либо потому, что они должны быть изначально связаны, либо потому, что они в конечном итоге будут в комплекте дважды, разбивая сборку (например, react , react-dom ).
Это не проблема с подходом, используемым в этом проекте как таковом. Это скорее общая проблема с Monorepos.

Чтобы решить эти проблемы, мы помечаем их как неахоусенные, поэтому они будут установлены в каждом пакете, который зависит от них.

В этом Monorepo вы можете увидеть пример таких библиотек в react-native-async-storage .

В конфигурациях Metro Bundler и Webpack, используемых в MonorePo, мы используем набор контактных инструментов, чтобы гарантировать, что пакеты не подъехают правильно.
Итак, пока вы добавляете эти библиотеки в список nohoist , вы должны быть полезны?

Пряжа классика против пряжи 2+

Мы стремимся сделать эту настройку совместимой с Yarn Classic, но, с несколькими изменениями, она также совместима с пряжей 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 каждого рабочего пространства, а не поднимаются в корневую папку. Это означает, что теперь вы можете безопасно безопасно раздела noHoist в package.json корня.

Проверьте руководство «Начало работы» пряжи 2+для получения дополнительной информации.

Известные проблемы

В некоторых случаях пряжа Classic не сможет разрешить правильно зависимости, которые имеют peerDependency от react-native .
Смотрите #22 за несколько обходных путей. Исправление в репо-репо react-native-monorepo-tools находится на работе.

Внося

Взносы, дискуссии и обратная связь приветствуются! Пожалуйста, спросите, есть ли какие -либо активные планы по изменениям функций, прежде чем отправлять новые PRS?