在 TypeScript 项目中配置路径别名

前言

在开发项目的时候使用 import语句时，常常看到 import xxx from '@xxx'，而不是import xxx from '../../../xxx'这种写法

此次本身搭了一个 react + typescript 的项目环境, 而后也想配置路径别名，所以遇到了不少坑。因此在此作一个记录，但愿能对遇到这个问题的人有所帮助。

第一个坑 tsconfig.js

在使用 typescript 的项目中，根目录下都会有一个 tsconfig.json 的文件, 以下代码：

{
  "compilerOptions": {
    {...compilerOptions}
}
复制代码

经过官网能够了解到若是要配置路径别名，那么就须要在compilerOptions中配置baseUrl和paths

const path = require('path')

{
  "compilerOptions": {
    {...compilerOptions},
    baseUrl: 'src',
    paths: {
      '@': ['src/*'],
      '@apis': ['src/apis/*'],
      ...
    }
}
复制代码

当咱们这样配置完启动项目的时候，会发现paths被干掉了。

至于缘由，我的以为是在经过npm start 项目的时候, tsconfig.json文件被重写了。这个能够在 package.json的scrips中看到，启动项目的时候用的是react-scripts start，也就是说react-scripts把咱们修改后的tsconfig.json给从新覆盖掉了。

也就是说，咱们须要依赖于某个东西来解决这个被覆盖的问题。因此有如下方法：

cnpm install react-app-rewired customize-cra --save

在根目录建立 config-overrides.js文件

// config-overrides.js

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

module.exports = override(
  addWebpackAlias({
    "@": path.resolve(__dirname, "./src"),
    "@common": path.resolve(__dirname, "src/common"),
    ...
  }),
  addDecoratorsLegacy(), 
)
复制代码

而且在package.json中作一点修改

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
复制代码

经过以上的操做，当咱们 cnpm start 的时候， config-overrides.json就可以生效，而且达到重写咱们的tsconfig.json里配置项的目的。

固然除此以外, 咱们还须要在tsconfig.json中也作一些配置, 由于上面提到若是直接在tsconfig.json中写入paths的话，项目启动时会被干掉，但tsconfig.json中有个extends配置项，支持从外部导入配置，所以：

建立外部配置项 tsconfig.paths.json

// tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@apis/*": ["src/apis/*"],
      "@common/*": ["src/common/*"],
      ...
    }
  }
}
复制代码

// tsconfig.json

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    {...compilerOptions}
  }
}
复制代码

以上就是整个路径别名的配置过程，以后就能够愉快的使用路径别名，减小 ../../ 这样让人看到眼花的导入方式了。