Блог

Я хочу создать общий модуль Typescript для React (Next.js ) веб-приложение и мобильные приложения React Native.

Этот модуль будет обрабатывать все вызовы серверной части (Firebase), а также управление состоянием с помощью context API.

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

В основном мне нужно сделать:

 import react from 'react',
if (platform == 'mobile') {
  import app from '@react-native-firebase/app'
  import firestore from '@react-native-firebase/firestore'
  import auth from '@react-native-firebase/auth'
  import storage from '@react-native-firebase/storage'
} else if (platform == 'web') {
  import app from 'firebase/app'
  import firestore from 'firebase/firestore'
  import auth from 'firebase/auth'
  import storage from 'firebase/storage'  
} else // throw some error
  

Конечно, этот код не будет работать. Есть ли решение для этого?

Спасибо

Чтобы различать запросы веб-приложения или мобильного приложения, основанного на react-native, вы можете посмотреть на параметры, которые мобильное приложение не поддерживает. Например, localStorage — это оконный метод в браузере, и он недоступен для мобильных устройств. Чтобы определить платформу, которую вы можете проверить на,

             if(typeof(localStorage)) {
               //Browser module initialization
              }
            else {
              //Mobile module initialization like AsyncStorage
              }
  

Вы можете проверить, существует ли Windows на платеформе

 if(windows ==underfined ) {
// mobile plateforme
}else{
// web plateforme
}
  

В настоящее время я использую 2 файла:

 directory
| - imports.ts
| - imports.native.ts
  

Когда я пишу, например:

 import { package1, package2 } from '../directory/imports.ts'
  

React Native знает, что ему нужно импортировать из imports.native.ts, а не из imports.ts. Это встроенная функциональность.

https://webpack.js.org/configuration/resolve/#resolvealias

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

Импорт не может быть условно разрешен в ESM, поскольку он всегда поддерживается; вы можете использовать динамический импорт, однако он возвращает обещания, которые могут усложнить работу с ними.