react jsconfig.json忽略路径

Question

我在react应用程序的根目录中有以下jsconfig.json：

{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"rmv": ["components/rmv/*"]
}
}
}

并且存在位于CCD_ 3文件夹中的CCD_。

但我试图直接这样出口：import Helper from 'rmv/helper'失败并出现错误：

Failed to compile
Module not found: Can't resolve 'rmv/helper' 

只有import Helper from 'components/rmv/helper'有效。为什么？PS：我也试过：

"paths": {
"rmv/*": ["components/rmv/*"]
}

也不起作用。

以下是可重复性最低的示例：github.com/chapkovski/trouble_with_jsconfig

特别是这些行：https://github.com/chapkovski/trouble_with_jsconfig/blob/e37c8c216eac0da7c70023f7fba47eea54973176/src/App.js#L4-L5

Answer 1

在使用create-react-app:制作的应用程序中，路径当前不可用

https://github.com/facebook/create-react-app/issues/5645

您可能需要考虑使用rescripts来修改CRA 2+应用程序中的配置。

Answer 2

路径需要相对于baseUrl。您的baseUrl的值为./src，这很好。但是，在rmv/*的数组中列出的路径不是相对路径，因为它们不是以相对位置(./或../(开头的。

我鼓励您尝试将./前缀添加到您的路径中。

{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"rmv/*": ["./components/rmv/*"]
}
}
}

我发现了这个主题的文档：使用webpack别名

Answer 3

[Eject CRA]您可以使用webpack别名作为用例的替代解决方案。

在webpack.config.js中

module.exports = {
//...
resolve: {
alias: {
rmv: path.resolve(__dirname, 'src/components/rmv/')
}
}
};

现在，您可以导入Helper组件，如下所示：

import Helper from 'rmv/helper';