在 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}
  }
}
複製代碼

以上就是整個路徑別名的配置過程，以後就能夠愉快的使用路徑別名，減小 ../../ 這樣讓人看到眼花的導入方式了。