在React和Typescript中,为什么绝对路径对嵌套文件夹不起作用?

yhived7q  于 2023-03-09  发布在  TypeScript
关注(0)|答案(2)|浏览(127)

我试图在React项目中设置绝对路径,但在嵌套文件夹和使用@前缀时遇到了一些问题。
在我的tsconfig.json中使用以下设置:

{
  "compilerOptions":{
    "baseUrl":"src",
    "paths":{
      "global/*":[
        "./global/*"
      ],
      "features/*":[
        "./features/*"
      ],
      "content/*":[
        "./features/content/*"
      ]
    }
  },
  "include":[
    "src"
  ]
}

这是可行的:import "features/content/css/viewContent.css";
但这并不:import "content/css/viewContent.css";
我在使用@前缀时也遇到了问题,例如在我的tsconfig.json中使用以下设置:

{
  "compilerOptions":{
    "baseUrl":"src",
    "paths":{
      "global/*":[
        "./global/*"
      ]
    }
  },
  "include":[
    "src"
  ]
}

这是可行的:import "global/components/example";
但是在我的设置中添加一个@前缀就像这样:

{
  "compilerOptions":{
    "baseUrl":"src",
    "paths":{
      "@global/*":[
        "./global/*"
      ]
    }
  },
  "include":[
    "src"
  ]
}

不起作用:import "@global/components/example";
上述示例的文件结构如下所示:

└── root dir
    ├── src
    │   └── features
    │       ├── content
    │           └── css
    │           └── etc...
    │           └── etc...
    │           └── etc...
    │   └── global
    │       ├── components 
    │       └── etc...
    │       └── etc...
    │       └── etc...
    │  
    └── tsconfig.json

我也遵循了here的步骤,但不幸的是没有太多的运气。
任何帮助都将不胜感激。

ibrsph3r

ibrsph3r1#

你需要在compilerOptions之外定义paths.如下所示:

{
  "compilerOptions": {
   ...
  },
  "exclude": ["node_modules"],
  "include": [
  ...
  ],
  "paths": {
    "components/*": ["./components/*"],
    "tests/*": ["./tests/*"],
    ...
  }
}

如果您有babel.config.js文件,则应在alias部分添加所有路径。

module.exports = {
  presets: [...],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          components: './components',
          tests: './tests',
        },
      },
    ],
    '@babel/plugin-proposal-optional-chaining',
    'macros',
  ],
};
v8wbuo2f

v8wbuo2f2#

这取决于您用于运行应用的服务器。
我对Vite也有同样的问题,实际上有一个针对这个问题的lib:vite-tsconfig-路径
但是我不喜欢为这样的小问题导入库。

相关问题