react native universal monorepo

Bereaksi monorepo universal asli

Pendekatan opini untuk mendukung beberapa platform dengan React Native menggunakan monorepo ruang kerja benang.

Lihatlah menjalankan React Native di mana-mana untuk panduan mendalam tentang bagaimana dan mengapa saya merekomendasikan mencoba pendekatan ini jika Anda berencana untuk mendukung banyak platform di aplikasi Anda.

• Ringkasan
• Pengaturan monorepo ruang kerja benang
• Android & iOS
• Windows & MacOS
• Web
• Ekstensi & Elektron Browser

Ringkasan

Monorepo ini menggunakan ruang kerja benang dan naskah untuk mendukung proyek Native React Modular.

Gagasan intinya adalah mengisolasi kode aplikasi JavaScript dari konfigurasi platform (kode asli + bundler aplikasi seperti Metro dan Webpack).
Isolasi ini terjadi dengan menggunakan ruang kerja yang berbeda: kami memiliki ruang kerja app untuk kode aplikasi JavaScript, ruang kerja mobile untuk konfigurasi seluler React Native, ruang kerja macos untuk konfigurasi macOS asli React, dan sebagainya.

Kami sepenuhnya merangkul benang nohoist untuk memungkinkan penggunaan versi yang berbeda dari React Native pada setiap platform (yang disarankan tetapi tidak diperlukan), menyederhanakan adopsi pembaruan asli React Native.
Terima kasih Nohoist, setiap platform Workspace ( mobile , macos , dll.) Dapat bergantung pada versi React Native apa pun, terlepas dari versi apa yang digunakan ruang kerja platform lainnya. Misalnya, kita dapat menggunakan [email protected] pada aplikasi seluler dan [email protected] pada aplikasi macOS-selama kode aplikasi JavaScript mendukung kedua versi.
Pendekatan ini mempromosikan pembaruan asli bereaksi secara bertahap atas pembaruan di Lockstep.

Untuk detail lebih lanjut, lihat "Running React Native Everywhere: Yarn Workspaces Monorepo Setup".

️ Tolong perhatikan bahwa saya tidak mengatakan ini adalah cara yang tepat untuk melakukan reaksi monorepos asli. Ini hanyalah pendekatan yang saya nikmati menggunakan basis kode yang lebih besar :)

Platform yang didukung

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

Memulai

Anda dapat menggunakan repo ini sebagai boilerplate, melepas ruang kerja platform yang tidak Anda butuhkan, atau Anda dapat membuat pengaturan ini dari awal jika Anda ingin sepenuhnya memahami cara kerjanya.

Menggunakan repositori ini sebagai pelat boiler

1. Klon The Repository: [email protected]:mmazzarolo/react-native-universal-monorepo.git
2. Jalankan benang instal cd react-native-universal-monorepo && yarn

Buat pengaturan ini dari awal

Tutorial langkah demi langkah tentang membuat repositori ini dari awal:

• Ringkasan
• Pengaturan monorepo ruang kerja benang
• Android & iOS
• Windows & MacOS
• Web
• Ekstensi & Elektron Browser

Tutorial untuk platform TV dan Next.js dari @TheFinnomenon:

• Menambahkan Dukungan TV TVOS & Android ke Monorepo
• Next.js di React-asli monorepo

Sumber Daya Tambahan:

• Jalankan aplikasi React Native Anda di web dengan React Native for Web
• Membangun Aplikasi Desktop Menggunakan Elektron dan Buat Aplikasi React
• Mengembangkan ekstensi browser dengan aplikasi Create React

Perintah yang tersedia

Perintah Pengembangan dan Bangun:

• yarn android:metro : Mulai server Metro untuk Android/iOS
• yarn android:start : Mulai kembangkan aplikasi Android
• yarn android:studio : Buka aplikasi Android di Android Studio
• yarn ios:metro : Mulai server Metro untuk Android/iOS
• yarn ios:start : Mulai kembangkan aplikasi iOS
• yarn ios:pods : Pasang IOS Cocoapods Dependency
• yarn ios:xcode : Buka aplikasi iOS di Xcode
• yarn macos:metro : Mulai Server Metro untuk MacOS
• yarn macos:start : Mulailah Mengembangkan Aplikasi MacOS
• yarn macos:pods : Instal MacOS Cocoapods Dependencies
• yarn macos:xcode : Buka aplikasi MacOS di Xcode
• yarn web:start : Mulai kembangkan aplikasi web
• yarn web:build : Buat build produksi aplikasi web
• yarn electron:start : Mulailah Mengembangkan Aplikasi Elektron
• yarn electron:package:mac : Paket biner produksi aplikasi elektron untuk macOS
• yarn electron:package:win : Kemas Binary Produksi Aplikasi Elektron untuk Windows
• yarn electron:package:linux : Kemas Binary Produksi Aplikasi Elektron untuk Linux
• yarn browser-ext:start : Mulai kembangkan ekstensi browser
• yarn browser-ext:build : Buat pembuatan produksi ekstensi browser
• yarn windows:metro : Mulai Server Metro untuk Windows
• yarn windows:start : Mulai kembangkan aplikasi Windows
• yarn tv:android:metro : Mulai server Metro untuk Android TV
• yarn tv:android:start : Mulai kembangkan aplikasi TV Android
• yarn tv:android:studio : Buka aplikasi TV Android di Android Studio
• yarn tv:tvos:metro : Mulai server Metro untuk TVOS
• yarn tv:tvos:start : Mulai kembangkan aplikasi TVOS
• yarn tv:tvos:xcode : Buka aplikasi TVOS di Xcode
• yarn tv:tvos:pods : Instal TVOS Cocoapods Dependencies
• yarn next:start : Mulai Aplikasi Next.js
• yarn next:build : Bangun Aplikasi Next.js
• yarn next:serve : Sajikan Aplikasi Next.js Build

Perintah lain (kami menggunakan ultra-pelari untuk menjalankan perintah ini di semua ruang kerja):

• yarn lint : serat setiap proyek
• yarn lint:fix : Lint + Perbaiki setiap proyek
• yarn test : Jalankan tes setiap proyek
• yarn typecheck : Jalankan pengecekan tipe TypeScript pada setiap proyek

Ketergantungan asli

Saat bekerja pada React Native dalam monorepo, Anda akan melihat bahwa beberapa paket tidak akan bekerja dengan benar ketika diangkat-baik karena mereka perlu dihubungkan secara asli atau karena mereka akhirnya dibundel dua kali, mematahkan build (misalnya, react , react-dom ).
Ini bukan masalah dengan pendekatan yang digunakan dalam proyek ini per se. Ini lebih merupakan masalah umum dengan monorepos.

Untuk memperbaiki masalah ini, kami menandainya sebagai Nohoist, sehingga mereka akan diinstal di setiap paket yang tergantung padanya.

Dalam monorepo ini, Anda dapat melihat contoh perpustakaan tersebut di react-native-async-storage .

Di metro bundler dan konfigurasi webpack yang digunakan di seluruh monorepo, kami menggunakan satu set alat buatan untuk memastikan paket Nohoisted diselesaikan dengan benar.
Jadi, selama Anda menambahkan perpustakaan ini ke daftar nohoist , Anda harus baik untuk pergi?

YARN CLASSIC vs YARN 2+

Kami berusaha untuk membuat pengaturan ini kompatibel dengan benang klasik - tetapi, dengan beberapa tweak, ini kompatibel dengan benang 2+ juga (memberikan semua manfaat benang 2+).
Lihat #22 untuk info lebih lanjut.

Menyiapkan benang 2+

1. Jalankan yarn set version berry di Root of Project. Ini akan membuat file .yarnrc.yml .
2. Tambahkan baris berikut ke .yarnrc.yml untuk memastikan direktori node_modules semuanya dibuat di setiap ruang kerja:

 nodeLinker : node-modules
nmHoistingLimits : workspaces

3. nmHositingLimits menceritakan bagaimana cara hoist dependensi untuk setiap ruang kerja. Dengan mengaturnya ke workspaces semua dependensi akan diinstal di node_modules dari setiap ruang kerja daripada diangkat ke folder root. Ini berarti Anda sekarang dapat dengan aman bagian noHoist di package.json root.json.

Lihat Panduan "Mulai" Yarn 2+untuk info lebih lanjut.

Masalah yang diketahui

Dalam beberapa kasus, benang klasik tidak akan dapat menyelesaikan dependensi dengan benar yang memiliki peerDependency pada react-native .
Lihat #22 untuk beberapa solusi. Perbaikan repo react-native-monorepo-tools sedang bekerja.

Berkontribusi

Kontribusi, diskusi, dan umpan balik dipersilakan! Silakan tanyakan apakah ada rencana aktif tentang perubahan fitur sebelum mengirimkan PR baru?