react + ts 配置路径别名

下载插件 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

在项目根目录下新建 paths.json，输入下面内容

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

在tsconfig.json中引入

{
  "extends": "./paths.json",
  "compilerOptions": {
  	// ....
  }
 }

在根目录添加 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
  }
)

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

import setupQk from "@/config/qiankun";

个人简介

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

项目地址

gitee.com/756585379/q…