React typescript下的 路径别名配置

react 如果使用了脚手架来创建项目比如
npx create-react-app my-app --template typescript
创建了一个 typescript的 react项目 ，如果想在项目中引入组件等等
默认情况下这样很难受:

import Mouse from '../components/Mouse';

如果想要这样的

import Mouse from '@/components/Mouse';

该如何配置那

1.首先 npm install babel-plugin-import customize-cra react-app-rewired --save-dev
2.在项目根目录新建 config-overrides.js

const { override, fixBabelImports,addWebpackAlias,addDecoratorsLegacy } = require('customize-cra');
const path = require('path')

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addWebpackAlias({
        ['@']: path.resolve(__dirname, './src')
    }),
    addDecoratorsLegacy(),
);

3.修改package.json

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

然后 就可以正常使用@符号来别名了 ，当然如果喜欢 ~ 这个也可以替换这个