反应jsconfig.json忽略路径

Question

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

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

在helper.jsx文件夹中有一个./src/components/rmv文件。

但是我试图像这样直接导出它： 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

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

在webpack.config.js

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

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

import Helper from 'rmv/helper';

Answer 3

路径必须相对于baseUrl。您的baseUrl的值为./src，很好。但是，在数组rmv/*中列出的路径不是相对路径，因为它们不是从相对位置（./或../）开始的。

我鼓励您尝试在路径上加上./前缀。

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

我找到了有关以下主题的文档：Using webpack aliases