网站搜索

typescript - React Native 绝对路径似乎不起作用


我试图配置 React Native 使用绝对路径来减轻导入的麻烦。我尝试了各种方法,但似乎没有一个对我有效。这是我的 tsconfig.json:

{
    "compilerOptions": {
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "isolatedModules": true,
        "jsx": "react",
        "lib": ["es6"],
        "moduleResolution": "node",
        "noEmit": true,
        "strict": true,
        "target": "esnext",
        "baseUrl": "src"
    },
    "include": ["src"],
    "exclude": [ "node_modules", "babel.config.js", "metro.config.js"]
}

以及 babel.config.js:

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [['module-resolver', { root: ['./src'] }]],
}

我尝试过有或没有 babel 插件。我尝试了通过谷歌找到的不同配置。我尝试添加 "baseUrl": "src" 而不使用 paths 选项,或者 "baseUrl": "./src"。我还尝试了不同的 "paths": {"*": ["./src/*"]}、"paths": {"*": ["src/*"]} 等变体。我尝试添加 "include": ["src"] 或者删除它。VS Code 对导入非常理解,但当我运行应用时,它会在绝对路径上崩溃。我是不是遗漏了什么明显的东西?

答案#1

尝试在你的根文件夹中添加一个 jsconfig.json,例如:

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

如果你使用的是 TypeScript,你可以在项目的 tsconfig.json 文件的 compilerOptions 中配置 baseUrl 设置。

所以现在,如果你的 src 文件夹包含一个 components 文件夹,你可以这样做:

import MyComponent from 'components/MyComponent';