如何在React项目中配置导入基础路径及@别名替代相对路径

1. 修改jsconfig.json #

将原来paths配置的~/*替换为@/*，让IDE可以识别@别名的路径提示：

{
  "compilerOptions": {
    "jsx": "react",
    "baseUrl": "src/",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

2. 安装自定义配置工具（未执行eject时需要） #

create-react-app默认封装了webpack配置，未执行eject的情况下需要用craco来扩展配置，执行以下命令安装依赖：
npm install @craco/craco --save-dev
如果使用yarn则执行：
yarn add @craco/craco --dev

3. 新增craco配置文件 #

在项目根目录新建craco.config.js，配置webpack路径别名：

const path = require('path')
module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

4. 修改package.json启动命令 #

将scripts中原来的react-scripts替换为craco（eject命令不需要修改）：

"scripts": {
  "start": "craco start",
  "build": "craco --max_old_space_size=4096 build",
  "test": "craco test",
  "eject": "react-scripts eject"
},

特殊情况：已执行eject操作 #

如果已经执行过npm run eject暴露了配置，直接修改config/webpack.config.js，在alias配置项中添加以下内容即可：

alias: {
  // 原有其他配置保持不变
  '@': path.resolve(__dirname, '../src')
}

配置完成后重启开发服务，就可以正常使用@/xxx格式的导入语句。

内容的提问来源于stack exchange，提问作者Mehmet Yener Yılmaz