如何在React中配置SRC文件夹根路径别名以简化文件导入

下面分几种常见的React项目类型，教你配置路径别名，彻底摆脱层级嵌套的导入烦恼：

一、Create React App（CRA）项目 #

CRA默认不允许直接修改Webpack配置，需要借助craco工具实现配置 override：

1. 安装craco依赖

npm install @craco/craco --save-dev
# 或用yarn
yarn add @craco/craco --dev

2. 修改package.json的启动脚本，把默认的react-scripts替换为craco：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

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

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 用@指代src文件夹根路径
      // 也可按需添加其他别名，比如 '@assets': path.resolve(__dirname, 'src/assets')
    }
  }
};

4. 配置编辑器智能提示，避免红色报错：

• JS项目：在根目录创建jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  },
  "include": ["src"]
}

• TS项目：在tsconfig.json的compilerOptions中添加配置

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
    // 保留原有其他配置
  }
}

配置完成后重启编辑器，就能直接用@开头的路径导入：

import dataJSON from '@/data/data.json';
import IconPath from '@/assets/svg/icons.svg';

二、Vite创建的React项目 #

Vite自带路径别名配置，直接修改根目录的vite.config.js：

1. 修改配置文件：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    }
  }
});

2. 同样配置编辑器提示，参考上面CRA项目的jsconfig.json或tsconfig.json配置即可，之后就能用@开头导入文件。

三、自定义Webpack配置的React项目 #

如果是自己手动配置Webpack的项目，直接修改webpack.config.js中的resolve.alias：

const path = require('path');

module.exports = {
  // 保留原有其他配置
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    }
  }
};

再配置jsconfig.json或tsconfig.json让编辑器识别路径，用法和上面一致。

内容的提问来源于stack exchange，提问作者Littlemad