如何在react项目中使用@符作为src文件路径

 前言

主要说一下在react项目中如何配置@为跟路径，文件太多使用./并不能很好的找到文件的路径，嵌套的很深写起来也会非常繁琐，话不多说，直接看步骤**

1.步骤

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

jsconfig.json 中：

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

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

2.用craco来配置路径别名

 craco是什么

craco是用来对create-react-app进行自定义配置的工具。 配置@路径别名，让脚手架工具能识别@

CRA(create-react-app) 将所有工程化配置，都隐藏在了 `react-scripts` 包中，所以，项目中看不到任何配置信息或者是配置文件。

如果要修改 CRA 的默认配置，有以下几种方案：

1.  【推荐】通过第三方库来修改，比如，`@craco/craco`
1.  通过执行 `yarn eject` 命令，释放 `react-scripts` 中的所有配置到项目中（注意：该操作不可逆！！！）

 craco的使用步骤

1.  安装包。`npm i -D @craco/craco`

1.  在项目根目录下，创建配置文件：`craco.config.js`。在配置文件中就可以做自定义的修改了。

    craco.config.js

    配置路径别名

```
const path = require('path')
module.exports = {
  webpack: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  }
}
```

3.  修改 `package.json` 中的脚本命令

package.json 中：

```
// 将 start/build/test 三个命令修改为 craco 方式

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

```

4.  在代码中，就可以通过 `@` 来表示 src 目录的绝对路径
5.  重启项目，让配置生效