React 中不再导入 ../../../

在 Create React App 中配置绝对导入的步骤，无需任何第三方包。

您是否正在导入类似这样的组件 ../../../../somecomponents？那么您应该更新为绝对导入。

绝对导入的好处

您可以将现有代码移动到具有导入功能的其他组件，而无需进行任何更改。
您可以使用导入路径轻松识别组件的实际放置位置。
更清洁的代码。
更容易书写。

配置绝对导入

为了支持绝对导入，请jsconfig.json在根目录中创建一个名为的文件并添加以下代码。



{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

现在让我们将下面组件中的相对导入转换为绝对导入



import React from 'react';
import Button from '../../components/Button';
import { red } from '../../utils/constants/colors';

function DangerButton(){
  return <Button color={red} />;
}

export default DangerButton;

上述导入将更改为如下



import React from 'react';
import Button from 'components/Button';
import { red } from 'utils/constants/colors';

function DangerButton(){
  return <Button color={red} />;
}

export default DangerButton;