craco 

 craco （一个对 create-react-app 进行自定义配置的社区解决方案）

目的:让脚手架工具能识别根路径，例如：支持用@符号表示src地址。

步骤1:安装包

npm i @craco/craco  

//或者

yarn add  @craco/craco 

步骤2:在项目根目录下，创建配置文件：craco.config.js

const path = require('path')

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

步骤3:修改 package.json 中的脚本命令

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

步骤4:顺带配置一下vscode识别@路径并给出路径提示,1. 在项目根目录创建 jsconfig.json 配置文件

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

步骤5:重启项目，让配置生效