Машинопись, включающая разные файлы в зависимости от команды компиляции

Question

Я использовал creat-react-app для инициализации некоторого кода, которым я хочу поделиться между нативным и веб-интерфейсом.В моем package.json у меня есть две отдельные команды для запуска для каждой платформы, используя react-scripts-ts и react-native-scripts-ts:

package.json

...,
"scripts": {
    "tsc": "tsc",
    "clean": "rimraf artifacts",
    "build": "npm run clean && npm run tsc --",
    "start-web": "npm run build && react-scripts-ts start",
    "start-native": "npm run build && react-native-scripts start",
},
...

(aподробное описание того, как это сделать, можно найти здесь https://medium.com/@yannickdot/write-once-run-anywhere-with-create-react-native-app-and-react-native-web-ad40db63eed0)

Это здорово, и я могу использовать компоненты react-native на обеих платформах. Проблема у меня возникает, когда я пытаюсь использовать внешние пакеты, такие как react-routing.

Я включаю react-router-native и react-router-dom в свой package.json. Я пытаюсь добиться того, что описано в этой статье (https://medium.com/@yannickdot/hi-jared-2650fbb2eda1), но использую машинопись не JS, давая мне:

routing.native.tsx

export {
  NativeRouter as Router, // Rename
  Switch,
  Route,
  Link
} from 'react-router-native'

routing.web.tsx

export {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from 'react-router-dom'

Однако, наобороткак описано в статье, при использовании машинописного текста не распознается автоматически, какой файл должен быть включен. Я получаю простую ошибку:

src/App.tsx:10:26 - error TS2307: Cannot find module './routing'.

10 import Router                        from "./routing";

Что имеет смысл, потому что, когда я смотрю на вывод компилятора,нет модуля routing существует:

artifacts
   | App.js
   | routing 
        | routing.native.js
        | routing.web.js

Как мне сказать компилятору машинописного текста включить все*.native.tsx файлы при запуске команды start-native и все *.web.tsx файлы при выполнении команды start-web?

В идеале это должно быть возможно во время компиляции, передавая дополнительные параметры вкомпилятор машинописи, который переопределяет tsconfig.json.Пример:

tsc --exclude="./**/*.native.tsx"

Я знаю, что это можно сделать с помощью взломанного решения, например, написав скрипт для копирования всего источника, удалив все ненужные файлы, сохранив правильные, икомпилируем эту скопированную исходную папку, но я хочу знать, есть ли более аккуратный способ сделать это.

Заранее спасибо!

Answer 1

Возможное решение без использования внешних инструментов:

1.Создайте функцию для проверки работы платформы

, см. этот вопрос в Stackoverflow

export default function getPlatform(): string {
    if (typeof document != 'undefined') {
        // I'm on the web!
        return 'web';
    }
    else if (typeof navigator != 'undefined' && navigator.product == 'ReactNative') {
        // I'm in react-native
        return 'native';
    }
    else {
        // I'm in node js
        return 'node';
    }    
}

2.Создайте маршрутизацию / index.ts

import getPlatfrom from '../getPlatform';

const platform = getPlatfrom();
const routing = platform === 'web' ? require('./routing.web') : require('./routing.native');

export const {Router, Switch, Route, Link} = routing;

3.Используйте маршрутизацию

import { Route } from './routing/index';

Вы можете добавить интерфейс IRouting и приведение некоторых типов в routing/index, чтобы не потерять безопасность типов и автозаполнение ...