React中修改引入路径,告别../../引入文件

在react开发中，我们有时候引入一个组件，要…/…/…/这样麻烦死了，这里介绍一种方法，让我们告别难受的…/

首先我们要安装一个东西对配置进行修改

yarn add @craco/craco

然后到package.json中将scripts改成

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

然后我们在src同级创建一个craco.config.js文件

const path = require('path')
const resolve  = dir => path.resolve(__dirname,dir)

module.exports ={
  webpack:{
    alias:{
      "@":resolve("src"),
      "components":resolve("src/components")
    }
  }
}

我们在src目录下创建一个components文件夹

之后我们如果引入这个文件夹里面的js文件或者其他的话，就可以直接这样写

import Ha from 'components/com'
import Ha from '@/components/com'

两者选一都可

另外：

"components":resolve("src/components")

可根据实际开发，自己设置路径