我们使用第三方库 @craco/craco 配置别名

教程

  1. 安装 @craco/craco

    1
    npm i -D @craco/craco

  2. 在项目根目录下创建配置文件 path.tsconfig.json:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
        "compilerOptions": {
            "baseUrl": "./",
            "paths": {
                "@/*": [
                    "src/*"
                ]
            }
        }
    }

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

    1
    2
    3
    4
    5
    6
    "scripts": {
       "start": "craco start",
       "build": "craco build",
       "test": "craco test",
       "eject": "craco eject"
     },

  4. 在根目录中配置 tsconfig.json:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
      "extends": "./path.tsconfig.json",
      "compilerOptions": {
        "target": "es5",
        "lib": [
          "dom",
          "dom.iterable",
          "esnext"
        ],
        }
    }

  5. yarn start 重启项目即可。