react使用craco配置@符号作为src文件路径

在使用react时，导入组件经常会出现'…/…/…/'来指代文件所在文件夹，很不美观，在vue中使用@符号指向src目录，所以仿照vue来配置src路径；

1：安装

npm i @craco/craco

2：修改package.json文件，将craco作为执行文件

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

3：配置craco.config.js

在根目录新建craco.config.js文件

const path = require("path")//导入path模块
//定义函数resolve,将你想要自定义的路径和js的根路劲作拼接
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
  webpack: {
    alias: {
       // 名称:路径
      "@": resolve("src")
    }
  }
};