目标

react项目中配置@路径别名，让脚手架工具能识别@。

怎么做

1. 安装修改 CRA 配置的包: npm i -D @craco/craco

2. 修改 package.json 中的脚本命令

3. 在项目根目录中创建 craco 的配置文件：craco.config.js，并在配置文件中配置路径别名

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

4. 如果项目使用了TS，修改 tsconfig.json 文件：

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

否则，修改 jsconfig.json 文件：

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

5. 重启项目，让配置生效

引用： github craco 配置