如何在React Native中使用绝对导入

vbopmzt1  于 2023-10-22  发布在  React
关注(0)|答案(1)|浏览(136)

当尝试在React Native中使用绝对导入时,大多数建议都指向使用这个库:babel-plugin-module-resolver
问题是这个库已经被创建者存档并标记为只读。最后一次提交是在一月份。因此,使用未维护的库是不明智的。
我还尝试根据其他建议将以下内容添加到我的tsconfig.json中:

"compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]

我认为这可能在React中有效,但在使用绝对导入时引发unable to resolve module的React Native中无效。
如何在一个新的React Native项目(版本0.72.5)中设置绝对路径,该项目使用typescript而不使用上述未维护的库?

mzaanser

mzaanser1#

您需要按照如下方式配置tsconfig.json

{
  "compilerOptions": {
    // other configurations,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

babel.config.js中:

{
  // other config here
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "extensions": [".ios.js", ".android.js", ".js", ".ts", ".tsx", ".json"],
        "alias": {
          "@/*": ["./src"]
        }
      }
    ]
  ]
}

最后,创建一个package.json文件,路径为:src/package.json包含以下内容:

{
  "name": "@"
}

相关问题