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

Question

src
    components
        HomePage
            Calendar.js
    containers
        HomePage
            index.js

我只是在 React 中使用推荐的文件夹结构（Presentation + Container）。当我处理 react-boilerplate 文件夹结构时，我可以在不列出相对路径 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

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

在 json 文件中。

baseUrl 是你所有文件夹的文件夹，如组件、容器和上下文定位。
内部路径 json 键是 baseUrl 中的文件夹文件夹，但您不能指定父文件夹中的每个文件夹。

我的项目片段。

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

像这样。

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

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

How to refer components without typing the complete relative path?

javascript

reactjs

react-boilerplate