为什么 create-react-app 别名无法从文件夹中找到 index.js？

Question

在为我的应用程序创建别名时，我遇到了一个奇怪的问题。 我正在尝试创建别名添加jsconfig.json看起来像

{
    "compilerOptions": {
        "lib": [
            "dom",
            "es2015",
            "es2016",
            "es6",
            "es2017"
        ],
        "target": "es2017",
        "module": "es6",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
            "actions/*": ["src/actions/*"],
            "public/*": ["public/*"],
            "components/*": ["src/components/*"],
            "containers/*": ["src/containers/*"],
            "constants/*": ["src/constants/*"],
            "config/*": ["config/*"],
            "helpers/*": ["src/helpers/*"],
            "stores/*": ["src/stores/*"],
            "styles/*": ["src/styles/*"]
        }
    },
    "exclude": ["node_modules", "**/node_modules/*"]
}

在这种情况下，它无法找到任何组件别名。

我将 json 文件更改为

{
    "compilerOptions": {
        "lib": [
            "dom",
            "es2015",
            "es2016",
            "es6",
            "es2017"
        ],
        "target": "es2017",
        "module": "es6",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./src/",
        "paths": {
            "actions/*": ["actions/*"],
            "public/*": ["public/*"],
            "components/*": ["components/*"],
            "containers/*": ["containers/*"],
            "constants/*": ["constants/*"],
            "config/*": ["config/*"],
            "helpers/*": ["helpers/*"],
            "stores/*": ["stores/*"],
            "styles/*": ["styles/*"]
        }
    },
    "exclude": ["node_modules", "**/node_modules/*"]
}

它能够获取组件别名但抛出错误Cannot find file: 'index.js' does not match the corresponding name on disk: './src/components/Checkbox/CheckBox'. 当我尝试将其作为import Checkbox from 'components/Checkbox'; . 我的文件夹结构看起来像

mainDir/
      config/
      public/
      src/
        component/
          Checkbox/
            index.js
      jsconfig.json
      package.json

我该如何解决这个问题？ 有没有其他方法可以使用create-react-app创建别名？

Answer 1

在create-react-app项目中， src文件夹之外的源文件不会被转译。 [1]

由于这个原因，直接从src文件夹之外使用JSX 语法的 es6 模块导入会失败。

通常的做法是在src文件夹中为其外部的模块创建符号链接，并设置别名以从src文件夹解析。 例如

        "baseUrl": "src",
        "paths": {
            "actions": ["actions/*"],
            "public": ["public/*"],
            "components": ["components/*"],
            "containers": ["containers/*"],
            "constants": ["constants/*"],
            "config": ["config/*"],
            "helpers": ["helpers/*"],
            "stores": ["stores/*"],
            "styles": ["styles/*"]
        }

符号链接外部模块

ln -s ../config/ ./src/
ln -s ../public/ ./src/

Answer 2

使用别名解决方案解决您的问题。 它可以从jsconfig.json或tsconfig.json加载您的路径。

对于您使用jsconfig.json的情况，配置非常简单，如下所示：

// config-overrides.js:

const {alias, configPaths} = require('react-app-rewire-alias')

module.exports = function override(config) {
  alias(configPaths())(config)
  return config
}