如何在 React js 中不使用相对导入

在 React js 中，通常使用相对导入来引入组件、工具等等。然而，在使用过程中，相对导入有一些缺点，如难以维护、容易出错等，因此有时候需要不使用相对导入。

下面介绍两种不使用相对导入的方法。

1. 使用绝对导入

使用绝对导入可以避免相对导入容易出现的问题。

首先，在项目根目录下创建一个 .env 文件，并添加如下内容：

NODE_PATH=src/

然后，在 package.json 文件中添加如下内容：

{
  "name": "example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "NODE_ENV=development node scripts/start.js",
    "build": "NODE_ENV=production node scripts/build.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

接下来，在你的代码中，使用绝对导入的方式来引入组件、工具等。例如，要引入 App 组件，可以这样写：

import App from 'components/App';

2. 使用 path alias

使用 path alias 同样可以避免相对导入的问题。

首先，在 package.json 文件中添加如下内容：

{
  "name": "example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "NODE_ENV=development node scripts/start.js",
    "build": "NODE_ENV=production node scripts/build.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "paths": {
    "@components/*": ["src/components/*"],
    "@utils/*": ["src/utils/*"]
  }
}

然后，在你的代码中，使用 path alias 的方式来引入组件、工具等。例如，要引入 App 组件和 utils.js 工具模块，可以这样写：

import App from '@components/App';
import utils from '@utils/utils';

需要注意的是，为了让 IDE 能够正确地解析 path alias，还需要在 jsconfig.json 或 tsconfig.json 文件中添加如下内容：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "exclude": ["node_modules", "build"]
}

以上两种方式都可以避免相对导入造成的问题，具体使用哪种方式，可以根据自己的实际情况来选择。