react 配置路径别名

craco 配置文档

1. 下载 @craco/craco

yarn add -D @craco/craco

2. 在项目根目录创建 craco.config.js 文件

// 配置信息
const path = require('path')

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src')
    }
  }
}

3. 修改package.json

// 将 start/build/test 三个命令修改为 craco 方式
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
},

注意： @别名路径提示

目标：能够让vscode识别@路径并给出路径提示
步骤：

1. 在项目根目录创建 jsconfig.json 配置文件
2. 在配置文件中添加以下配置

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

VSCode 会自动读取 jsconfig.json 中的配置，让 vscode 知道 @ 就是 src 目录