creact-react-app typescript版配置we

PS：个别项目如:【react-native】配置别名@等造成编辑器无法点击跳转到相应文件；不配置../../层级太深可读性差-但编辑器【vscode】可点击挑入该文件
PS：请自行决定是否配置
简单测试点击是否跳转到该文件：react-ts版项目配置不配置均可跳转【vscode】；react-native配置不可跳转; Vue配置不配置均不可跳转

1. 创建项目

yarn create react-app my-app --typescript

2. 运行命令，导出自定义配置，命令创建config和scripts两个文件夹

npm run eject

3. 修改config/webpack.config.js - 添加自定义别名

// 292~298行
alias: {
     // Support React Native Web
     // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
     "@src": path.resolve('src'),
     "@": path.resolve('src'),
     'react-native': 'react-native-web',
}

4.在项目tsconfig.json同级目录创建paths.json文件 - 写入

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

5.在tsconfig.json中 - 写入

    "include": ...,
    "extends": "./paths.json"

按步骤执行页面就应该可以像下面这样引入组件了

// 原来
import { AddUser } from '../../services/base'; 

// 现在
import BaseService from '@/services/base';