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/*"]
        }

Symlink外部模块

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

Answer 2

使用 alias 解决方案解决您的问题。它可以从 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
}

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

2 个答案: