I want to develop a react js application that has specific platform code (Electron, Browser, Ionic).

First I made a library that wraps the platform-specific API in one interface like storage for example. I made a StorageInterface and a Storage class that implements the StorageInterface then I have StorageElectron class which inherits the Storage class same goes for BrowserStorage and IonicStorage. Now in my react app I just initiate the Service but I want to change it in build time.

Let's say I have this line of code let storageService: StorageInterface = new Storage(). When I enter npm build electron it builds with the StorageElectron class and when I enter npm build web it builds with the StorageWeb class instead of StorageElectron. The Storage class is just for the OOP norm it has only the headers of the methods but does not implement the functionalities.

I don't know if it's possible like this.

What I thought so far :

1- Create a Webpackloader or a precompiler that changes some lines of code in some files.

2- Create a precompiler using TypeScript decorators.

3- Create a simple script that changes the files that contain these calls before they react script.

I just want to know if there is a tool or a library able to do that.