当前位置: 首页 > 软件库 > 手机/移动开发 > >

react-native-universal-monorepo

授权协议 MIT License
开发语言 Java
所属分类 手机/移动开发
软件类型 开源软件
地区 不详
投 递 者 嵇永望
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

React Native Universal Monorepo

An opinonated approach to supporting multiple platforms with React Native using a Yarn Workspaces monorepo.

Check out Running React Native everywhere for an in-depth guide on how and why I recommend trying out this approach if you're planning to support multiple platforms in your app.

 

Overview

This monorepo uses Yarn workspaces and TypeScript to support a modular React Native project.

The core idea is to isolate the JavaScript app code from the platform configurations (native code + the app bundlers like Metro and Webpack).
This isolation happens by using different workspaces: We have an app workspace for the JavaScript app code, a mobile workspace for the React Native mobile configuration, a macos workspace for the React Native macOS configuration, and so on.

We fully embrace Yarn nohoist to allow using different versions of React Native on each platform (which is recommended but not required), simplifying the adoption of new React Native updates.
Thanks nohoist, each platform workspace (mobile, macos, etc.) can depend on any React Native version, regardless of what version the other platform workspaces are using.For example, we can use react-native@0.65 on the mobile app and react-native@0.63 on the macOS app — as long as the JavaScript app code supports both versions.
This approach promotes gradual React Native updates over updates in lockstep.

For more details, check out "Running React Native everywhere: Yarn Workspaces monorepo setup".

⚠️ Please notice that I'm not saying this is the right way to do React Native monorepos. This is just an approach that I enjoy using on larger codebases :)

Supported platforms

  • Android (React Native 0.65)
  • iOS (React Native 0.65)
  • Windows (React Native 0.65)
  • MacOS (React Native 0.63)
  • Android TV (React Native 0.65)
  • tvOS (React Native 0.65)
  • Web (React Native 0.65)
  • Web - Browser Extension (React Native 0.65)
  • Web - Electron (React Native 0.65)
  • Web - Next.js (React Native 0.65)

Getting started

You can use this repo as a boilerplate, removing the workspaces of platforms that you don't need, or you can create this setup from scratch if you want to fully understand how it works.

Using this repository as a boilerplate

  1. Clone the repository: git@github.com:mmazzarolo/react-native-universal-monorepo.git
  2. Run yarn install cd react-native-universal-monorepo && yarn

Create this setup from scratch

Step by step tutorial on creating this repository from scratch:

Tutorial for the TV and Next.js platforms from @thefinnomenon:

Additional resources:

Available commands

Development and build commands:

  • yarn android:metro: Start the metro server for Android/iOS
  • yarn android:start: Start developing the Android app
  • yarn android:studio: Open the android app on Android Studio
  • yarn ios:metro: Start the metro server for Android/iOS
  • yarn ios:start: Start developing the iOS app
  • yarn ios:pods: Install iOS cocoapods dependencies
  • yarn ios:xcode: Open the iOS app on XCode
  • yarn macos:metro: Start the metro server for macOS
  • yarn macos:start: Start developing the macOS app
  • yarn macos:pods: Install macOS cocoapods dependencies
  • yarn macos:xcode: Open the macOS app on XCode
  • yarn web:start: Start developing the web app
  • yarn web:build: Create a production build of the web app
  • yarn electron:start: Start developing the Electron app
  • yarn electron��mac: Package the production binary of the Electron app for macOS
  • yarn electron��win: Package the production binary of the Electron app for windows
  • yarn electron��linux: Package the production binary of the Electron app for linux
  • yarn browser-ext:start: Start developing the browser extension
  • yarn browser-ext:build: Create a production build of the browser extension
  • yarn windows:metro: Start the metro server for Windows
  • yarn windows:start: Start developing the Windows app
  • yarn tv:android:metro: Start the metro server for Android TV
  • yarn tv:android:start: Start developing the Android TV app
  • yarn tv:android:studio: Open the Android TV app in Android Studio
  • yarn tv:tvos:metro: Start the metro server for tvOS
  • yarn tv:tvos:start: Start developing the tvOS app
  • yarn tv:tvos:xcode: Open the tvOS app in XCode
  • yarn tv:tvos:pods: Install tvOS cocoapods dependencies
  • yarn next:start: Start the Next.js app
  • yarn next:build: Build the Next.js app
  • yarn next:serve: Serve the Next.js app build

Other commands (we use ultra-runner to run these commands on all workspaces):

  • yarn lint: Lint each project
  • yarn lint:fix: Lint + fix each project
  • yarn test: Run tests of each project
  • yarn typecheck: Run the TypeScript type-checking on each project

Native dependencies

While working on React Native in a monorepo, you'll notice that several packages won't work correctly when hoisted — either because they need to be natively linked or because they end up being bundled twice, breaking the build (e.g., react, react-dom).
This is not an issue with the approach used in this project per se. It's more of a common problem with monorepos.

To fix these issues, we mark them as nohoist, so they will be installed in each package that depends on them.

In this monorepo, you can see an example of such libraries in react-native-async-storage.

In the metro bundler and Webpack configs used across the monorepo, we're using a set of build-tools to ensure nohoisted packages are resolved correctly.
So, as long as you add these libraries to the nohoist list, you should be good to go ��

Contributing

Contributions, discussions, and feedback are welcome! Please keep in mind that this project is still a WIP, so I suggest asking if there are any active plans on feature changes before submitting new PR ��

 相关资料
  • �� Universal React Simple universal React application with server side rendering. Built using latest version of React (v16), React Router (v5+), Redux (v7+), Express (v5+), Webpack (v4+), Babel Preset

  • Universal React Redux Boilerplate A universal React/Redux boilerplate with sensible defaults. Out of the box, thisboilerplate comes with: Server-side rendering with Express Code splitting with dynamic

  • Koa React Universal koa2、react、react-universal-component、koa-webpack-server、async/await、code-splitting、hot-module-replacement、react-router4、redux-thunk This project is dedicated to build simple yet po

  • Universal React Tutorial A tutorial on building universal web applications. The web application is built with: Node.js Express React ReactRouter Redux and ReactRedux Download $ git clone https://githu

  • React Redux Universal Boilerplate Introduction I started this project to learn tools like React, Redux, Webpack, babeljs.io, ES6/ES2015... I did it mainly for fun. But it will be maintained and then I

  • Simple Universal React Redux The simplest possible Async Universal React & Redux boilerplate. This repo is an attempt to make the simplest server-side rendered (universal) async React Redux app. Boile