react + typescript + antd 配置craco-alias别名

1、项目根目录创建tsconfig.extend.json文件

{

　　"compilerOptions": {

　　　　"baseUrl": "./src",

　　　　"paths": {

　　　　　　"@src/*": ["./*"],

　　　　　　"@api/*": ["./api/*"],

　　　　　　"@app/*": ["./app/*"],

　　　　　　"@assets/*": ["./assets/*"],

　　　　　　"@components/*": ["./components/*"],

　　　　　　"@utils/*": ["./utils/*"]

　　　　}

　　}

}

 

2、根目录文件tsconfig.json配置

新增 "extends": "./tsconfig.extend.json"

 

 

3、根目录craco.config.js文件配置

const CracoAlias = require("craco-alias");

module.exports = {

　　

plugins: [

　　{

　　　　plugin: CracoAlias,

　　　　options: {

　　　　　　source: "tsconfig",

　　　　　　baseUrl: "./src",

　　　　　　tsConfigPath: "./tsconfig.extend.json",

　　　　}

　　}

]

}

 

4、npm start 重启项目。

 

5、使用 

import logo from '@assets/home/logo.png';

 

<img src={logo} alt="logo" />