如何在不键入完整相对路径的情况下引用组件？

Question

src
    components
        HomePage
            Calendar.js
    containers
        HomePage
            index.js

我只是在React（Presentation + Container）中使用推荐的文件夹结构。在研究react-boilerplate文件夹结构时，我可以引用Components文件夹内的Components而不列出相对路径import Calendar from 'components/HomePage/Calendar';。如何在我的项目中做到这一点，而无需输入完整的相对路径import Calendar from '../../components/HomePage/Calendar'；  ？

Answer 1

以下.babelrc文件使我能够使用myproject/components/HomePage/Calendar而不是../../components/HomePage/Calendar来引用组件：

{
  "env": {
    "development": {
      "plugins": [
          ["module-resolver", {
            "alias": {
              "myproject": "./src",
            }
          }]
        ]
    },
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

Answer 2

分别根据您的项目，javascript或打字稿创建jsconfig.json或tsconfig.json。

在json文件中。

1. baseUrl是所有文件夹（如组件，容器）的文件夹 和上下文。
2. 内部路径json中的键是baseUrl内的文件夹 文件夹，但是您不能在父文件夹中指定每个文件夹。

我的项目摘要。

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "screens/*": ["src/screens/*"],
      "components/*": ["src/components/*"],
      "utils/*": ["src/utils/*"]
    }
  }
}

就像这样。

{
  "compilerOptions": {
    "baseUrl": "your top most parent folder",
  }
}