导入组件时停止使用 ../../../，而是使用此方法

简介📚

当你去 GitHub 上看到其他开发者的代码时，他们大多数都是这样导入组件的👇

import Button from "../../../components/Buttons/Button"

这称为相对导入。相对导入将以./、/或开头../。

我并不是说这是错误的方法，甚至这样导入也不会出现问题，但是如果你有一个非常大且复杂的项目，相对导入看起来会非常混乱，类似于此。

import Button from "../../../../../../components/Buttons/Button"

然而，有一种更好、更简洁的方法来导入这些组件。这种方法叫做绝对导入。绝对导入如下所示：

import Button from "components/Buttons/Button"

向 React Apps（CRA）添加绝对导入💡

在任何代码编辑器中打开你的项目，并在项目根目录中创建一个名为 的新文件jsconfig.json。创建文件后，将以下 JSON 粘贴到其中。

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

这将指示 Webpack 使用该src目录作为基础目录。

结论⌛

希望这篇短文对你有所帮助。如果你需要任何帮助，请在评论区告诉我。

让我们在Twitter和LinkedIn上联系

👋 感谢阅读，下次再见