使用ts构建的react项目配置别名

一.使用ts构建的react项目，现在tsconfig.json文件中配置baseUrl和paths。由于直接在tsconfig.json里面配置paths字段后重启项目，会将配置好的paths自动移除，所以采用extends字段让tsconfig.json继承自定义的tsconfig.paths.json。步骤如下：

　　1.现在项目根目录下创建tsconfig.paths.json文件,内容如下：

{

  "compilerOptions": {

    "baseUrl": "./",

    "paths": {

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

    }

  }

}

　　2.在tsconfig.json中继承tsconfig.paths.json文件，使用了tsconfig.json提供的extends字段:

{

  "compilerOptions": {

    "target": "es5",

    "lib": [

      "dom",

      "dom.iterable",

      "esnext"    ],

    "allowJs":true,

    "skipLibCheck":true,

    "esModuleInterop":true,

    "allowSyntheticDefaultImports":true,

    "strict":true,

    "forceConsistentCasingInFileNames":true,

    "noFallthroughCasesInSwitch":true,

    "module": "esnext",

    "moduleResolution": "node",

    "resolveJsonModule":true,

    "isolatedModules":true,

    "noEmit":true,

    "jsx": "react-jsx",

    "experimentalDecorators":true  },

  "include": [

    "src"  ],

  "extends": "./tsconfig.paths.json"}

3.配置完tsconfig.json文件后，就需要安装customize-cra和react-app-rewired库：

　　　　yarn add customize-cra react-app-rewired --save-dev

　　4.修改package.json:

"scripts": {

    "start": "react-app-rewired start",

    "build": "react-app-rewired build",

    "test": "react-app-rewired test",

    "eject": "react-app-rewired eject"  }

　　5.在项目根目录下新建config-overrides.js（只能是js文件，别建成ts文件了），内容如下：

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

const path = require("path");

module.exports =  override(

  addDecoratorsLegacy(),

  addWebpackAlias({

    "@": path.resolve(__dirname, './src')

  })

);

6.配置完成，可以在项目中使用如：import App from "@/App"的导入方式了