使用打字稿路径映射时反应本机加载模块错误

Posted 2023-02-19

【中文标题】使用打字稿路径映射时反应本机加载模块错误

【英文标题】：React Native Loading Module error when using typescript path mapping

【发布时间】：2018-03-11 21:18:01

【问题描述】：

我正在尝试使用 typescript 路径映射来改进我的导入。

目前我有以下源码结构

tsconfig.json
src
..index.ts
..moduleA
....index.ts

所以，在我的 tsconfig.json 中，我有

"baseUrl": ".",
"paths": 
     "moduleA": ["./src/moduleA/index.ts"]
,

我在 src\index.js 上调用

import  MyClassFromModule from 'moduleA';

一切都编译得很好，但是当 React Native 尝试加载模块时，我得到了以下错误：

error: bundling: UnableToResolveError: Unable to resolve module `mymodule` from `C:\Git\phoenix\modules-poc\native\build\index.android.js`: Module does not exist in the module map or in these directories: C:\Git\phoenix\modules-poc\native\node_modules

所以问题是模块不在 node_modules 内，而是在源文件夹内。如何告诉 React Native 从 src 文件夹加载模块？

谢谢

【参考方案1】：

react-native-typescript-transformer 只是将 ts 转换为 js。所有导入仍然在编译阶段使用 Metro 捆绑器处理到一个捆绑文件中，因此您也需要对其进行配置。使用这样的 .babelrc 尝试 babel 插件模块解析器

 "presets": ["react-native"],
  "plugins": [
    ["module-resolver", 
      "root": ["./src"],
      "extensions": [".js", ".ts", ".tsx", ".ios.js", ".android.js"]
    ]
  ]

react-native-typescript-transformer 的现代替代方案是 babel 7 的 typescript 预设。如果项目中没有流类型，您可以使用它。检查这个存根项目https://github.com/Microsoft/TypeScript-Babel-Starter 仍然应该配置.babelrc，但现在更明显了。