Reac中配置@别名路径

1. 背景知识

1. 路径解析配置（webpack），把 @/ 解析为 src/
2. 路径联想配置（VsCode），VsCode 在输入 @/ 时，自动联想出来对应的 src/下的子级目录

2. 路径解析配置

注：配置完成后重启才能生效
配置步骤：

1. 安装craco：npm i -D @craco/craco
2. 项目根目录下创建配置文件：craco.config.js（不在根目录下不生效）
3. 配置文件中添加路径解析配置

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

4. 包文件中配置启动和打包命令

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

配置前：

配置后

3. 联想路径配置

配置联想路径配置的作用是：在输入文件路径@/时有路径提示

配置步骤：

1. 根目录下新增配置文件 - jsconfig.json
2. 添加路径提示配置（添加到jsconfig.json文件中）

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