react + ts路径别名配置不生效

一、react + ts路径别名配置不生效

1.下载插件 react-app-rewired 和 customize-cra

create-creact-app项目，如果需要手动修改配置，需先npm run eject弹出配置，这个过程是不可逆的。
这里介绍使用react-app-rewired。它的作用是用来帮助你重写react脚手架配置。

npm i react-app-rewired --save-dev 
npm i customize-cra --save-dev
或
yarn add -D react-app-rewired 
yarn add -D customize-cra

2.在项目根目录下新建 tsconfig.extend.json

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

3.在tsconfig.json中引入tsconfig.extend.json

{
  "extends": "./tsconfig.extend.json",
  "compilerOptions": {
  	 ....
  }
 }

4.在根目录添加 config-overrides.js

const {
  override,
  addWebpackAlias,
} = require("customize-cra");

const PKG = require("./package.json");
const path = require("path");

if (process.env.NODE_ENV === "production") {
  process.env.GENERATE_SOURCEMAP = "false";
}

module.exports = override(
  //别名配置
  addWebpackAlias({
    "@": path.join(__dirname, "./src"),
  }),
  (config) => {
    // 配置打包目录输出到dist/PKG.name
    const paths = require("react-scripts/config/paths");
    paths.appBuild = path.join(path.dirname(paths.appBuild), `dist/${PKG.name}`)
    config.output.path = paths.appBuild

    // 去掉打包生产map文件
    // config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false;
    if (process.env.NODE_ENV === "production") {
      config.devtool = false;
    }

    return config
  }
)

5.修改package.json，把react-scripts都替换为react-app-rewired

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

然后在代码里就可以用@别名了

import setupQk from "@/config/qiankun";

二、项目地址

https://gitee.com/756585379/qiankun

三、个人简介

本人全栈开发，擅长java，react，go等语言，熟悉mysql，redis，kafka，es，docker等中间件，提供技术支持，运维服务，面试辅导等，有意者可以加我微信详聊：756585379