Typescript babel-plugin-module-resolver

Question

您好，打字稿相当于babel-plugin-module-resolver。我正在尝试将“ react-native”解析为“ react-native-web”。下面的例子。

import { View } from "react-native" 
// should resolve to to once compiled or run using ts-node or ts-loader
import { view } from "react-native-web"

我已经尝试解决了一段时间，然后才提出问题，但没有成功。这是我尝试过的。

第一次尝试：-不成功

// tsconfig.json
"baseUrl": "./" 
"paths": {
  "react-native": ["node_modules/react-native-web"]
},
"skipLibCheck": true

第二次尝试：使用Babel作翻译：成功，但并不理想或优雅。由于将.tsx，.ts扩展名传递给babel节点时出现问题，即使使用--extensions“ .ts，tsx”标志，使用vscode调试时也会出现问题。

// .babelrc
{
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-object-rest-spread"
    ],
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript"
    ]
}

有人有什么想法吗？任何帮助将不胜感激。

Answer 1

您可以尝试以下方法：https://www.npmjs.com/package/tsconfig-paths

Typescript默认情况下模仿模块的Node.js运行时解析策略。但是，它也允许使用路径映射，该映射允许指定任意模块路径（不以“ /”或“。”开头）并映射到文件系统中的物理路径。打字稿编译器可以从tsconfig解析这些路径，因此可以正常编译。但是，如果您随后尝试使用节点（或ts-node）执行编译的文件，则它将仅在node_modules文件夹中一直查找到文件系统的根目录，因此无法在tsconfig中找到由路径指定的模块。