为什么在React Native项目中,当将打字脚本文件导入到其他打字脚本文件中时,绝对路径不起作用,而在其他方面却可以?

dldeef67  于 2022-12-19  发布在  React
关注(0)|答案(1)|浏览(120)

bounty将在17小时后过期。此问题的答案可获得+50声誉奖励。gabriellend正在寻找来自声誉良好来源的答案:嘿!我希望能引起更多的关注,我已经看到了很多类似的问题,没有明确的答案,至于幕后发生了什么。
背景:

我正在逐步将一个现有的React Native项目转换为TypeScript。基于我的babelrc配置,绝对路径已经工作了很多年。

问题:

添加TypeScript后,绝对路径仅在以下情况下有效:

  • js文件导入其他js文件
  • ts文件导入js文件
  • js文件导入ts文件

不起作用的是:

  • ts文件导入其他ts文件

它似乎在VSCode中工作,但当我试图构建我的应用程序时,我得到了臭名昭著的:
在项目或以下目录中找不到{在此插入文件}:节点模块等。
我花了几个星期的时间试图弄明白这一点。TypeScript的绝对路径似乎是很多人遇到的一个挑战。我用无数的组合和加减修改了我的babelrctsconfigeslintrcmetro.config.js。我安装了依赖项,尝试了错误提示的所有方法(删除缓存,重新启动等)。我玩过import语句,搜索过文档,直到我遍体鳞伤,重新安装了node_modulespods
唯一起作用的(除了相对导入,还有ew)是在我试图导入的文件夹中添加一个package.json,如下所示:

{
  "name": "app"
}

这看起来很简单,但我不能接受这是唯一的方法。随着我转换越来越多的文件,我真的不想像一些过度工作的打字仙女一样到处喷洒package.json:)
我不想让这个太长,所以如果有人认为这将是有益的看到我的配置文件,我可以肯定地添加他们。特别是希望一个答案参考官方来源。超级感谢任何人的帮助!

zu0ti5jz

zu0ti5jz1#

在React Native项目中导入TypeScript文件时,绝对路径可能不起作用,原因有几个。
一个可能的原因是TypeScript编译器无法解析导入文件的路径。在TypeScript中,编译器遵循一组规则来确定如何解析模块路径,这些规则在tsconfig.json文件的“moduleResolution”选项中指定。如果“moduleResolution”选项设置为“node”,编译器将使用与Node.js相同的算法来解析模块路径,这意味着编译器将在导入模块的目录中查找package.json文件,如果找到,它将使用package.json文件中的“main”字段来确定模块的路径。
如果“moduleResolution”选项设置为“classic”,编译器将使用与早期版本的TypeScript相同的算法来解析模块路径。这意味着编译器将在导入模块的目录中查找与导入模块同名的.ts或.d.ts文件。
如果“moduleResolution”选项设置为“none”,则编译器根本不会尝试解析模块路径,而只会使用import语句中指定的路径。
出现此问题的另一个可能原因是,由于项目的生成系统中存在配置问题,TypeScript编译器无法找到导入的文件。在React Native项目中,生成系统通常是Metro,它负责将源代码转换为可在目标平台上执行的形式。Metro使用metro.config.js文件配置生成过程。并且这个文件可以指定如何处理不同类型文件的规则。如果metro. config. js文件没有正确配置为处理绝对路径,构建过程可能会失败。

相关问题