react+ts+antd+webpack 配置别名alias

1. 配置 craco.config.js

在webpack选项里面增加别名的相关配置。
可以根据代码的规则进行增加字想要的别名

  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@pages': path.resolve(__dirname, 'src/pages'),
      '@ts': path.resolve(__dirname, 'src/types')
    }
  }

2. 在根目录新增 path.json 文件

需要在 tsconfig.json 中 以拓展 extends 的方式引入

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["*"],
        "@ts/*": ["src/types/*"],
        "@pages/*": ["src/pages/*"],
        "@components/*": ["src/components/*"]
      }
    }
  }

3. 在 tsconfig.json 中引入 path.json 文件

extends 属性与 include, compilerOptions等属性 同等级

  "compilerOptions": {...},
  "extends": "./path.json",
  "include": [
    "src"
  ]

4. 使用

  import xxx from '@pages/login'

5. 拓展

在 vsCode 拓展中 安装 <别名路径跳转 alias-skip> 插件， 可以实现和一般路径同样的跳转体验

名称: 别名路径跳转
ID: lihuiwang.vue-alias-skip
说明: 别名路径跳转插件，支持任何项目，可以自由配置映射规则，自由配置可缺省后缀名列表
版本: 0.0.25
发布者: lihuiwang
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=lihuiwang.vue-alias-skip