包含不同文件的类型记录(取决于编译命令)

Question

我使用creat-react-app初始化了一些代码，我希望在本地和web之间共享这些代码。在我的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",
},
...

(关于如何做到这一点的详细说明可以在这里找到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

如何告诉类型记录编译器在运行start-native 命令时包含所有start-native文件，以及在运行 start-web 逗号时包含所有 *.web.tsx 文件？E 238

理想情况下，这应该是可能的，在编译时，传递额外的参数到类型记录编译器，这将覆盖tsconfig.json。示例：

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

我知道这可以通过被黑客攻击的解决方案来完成，例如，编写一个脚本来复制整个源代码，删除所有不想要的文件，保留正确的文件，并编译复制的源文件夹，但是我想知道是否有更好的方法来做到这一点。

提前感谢！

Answer 1

一种不使用外部工具的可能解决方案：

1.创建一个函数来检查平台运行情况。

请参阅this question on 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.创建路由/索引。

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中，这样您就不会失去类型安全和自动完成.