Hur man korrekt hanterar React Native- och webbläsarimplementationer i Typescript
Jag arbetar på en app, med en webbversion (React DOM) och en native-version.
Jag skapade ett internt "core"-paket med någon kärna som delas mellan de två plattformarna. För vissa moduler i mitt core-paket behöver jag ha olika implementationer mellan webbläsarversionen och den inbyggda versionen. Till exempel behöver jag hantera Base64-data, så jag har en base64.ts-fil med webbläsarimplementationen:
const { atob, btoa } = window
export { atob, btoa }
Och en React Native-implementation i base64.native.ts som använder ett externt bibliotek :
export { decode as atob, encode as btoa } from "base-64"
Och jag kan använda det i min kod på det här sättet:
import { btoa } from "core/base64"
Detta fungerar bra på båda plattformarna, eftersom React Native Metro-bundlern föredrar filen .native.ts och använder den.
Men Typescript-kompilatorn genererar ett fel när den kontrollerar mitt React Native-projekt eftersom när den stöter på importerna löser den dem med webbaserad implementation (base64.ts) vilket triggar ett fel eftersom btoa inte finns i det globala utrymmet i React Native.
Jag har samma problem med andra moduler med olika webb- och inbyggda implementationer, till exempel när webbmodulen använder window och RN-modulen använder inbyggda funktioner.
Vad är det stödda sättet att hantera tvärplattform-implementationer som detta?