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?