react jsconfig.json 忽略路径

Question

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

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

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

但我尝试像那样直接导出它： 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

Answer 1

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

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

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

我找到了关于这个主题的文档：Using webpack aliases

Answer 2

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

在webpack.config.js

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

现在，您可以按如下方式导入 Helper 组件：

import Helper from 'rmv/helper';

Answer 3

路径目前在使用 create-react-app 制作的应用程序中不可用：

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

react jsconfig.json ignores paths