在 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}
  }
}

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