create-react-app typescript 配置路徑別名

最近在開發新項目，時間比較緊急，因此並無時間去瀏覽技術文章沉澱新知識。但只要用心，會思考，在業務開發中也是能夠沉澱技術的。

此次的項目是用create-react-app搭建的，開發語言選的是typescript。因爲是首次用typescript來開發搭建一個完整的項目（之前只是用typescript寫寫組件）遇到的坑仍是挺多的。

今天先來分享第一個坑：配置路徑別名。

通常的項目，咱們能夠在webpack.base.config文件裏進行設置

webpack.base.config 文件

...
module.exports = {
    ...
    resolve: {
        alias: {
          '@': src
        }
    }
    ...
}
...
複製代碼

但create-react-app沒有這個文件，由於腳手架默認把全部的配置都設置好了，若是想要修改就須要新建一個config-overrides.js文件去覆蓋默認配置。

網上大部分資料都是如下兩個步驟：

1.修改config-overrides.js文件：

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

module.exports = override(
  addWebpackAlias({
    "@": path.resolve(__dirname, 'src')
  }),
  addDecoratorsLegacy(), 
);
複製代碼

2.在tsconfig.json文件中新增paths配置項:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "baseUrl": "src",
    "paths": {
      "@/*": ["src/*"]
    },
    ...
  }
}
複製代碼

將App.tsx中component的引入方式改成：

import component from '@/component'
複製代碼

第一步沒什麼問題，執行第二個步驟，當你npm run start啓動項目的時候，項目編譯報錯：Cannot find module '@/component'。如今的你表情以下↓ ↓

這個時候你能夠去tsconfig.json文件中看看，paths不見了！小朋友你是否是有不少問號？

解決方案

爲了解決上述步驟二出現的問題，能夠在項目根目錄（src同級目錄）新建一個paths.json文件，具體文件名稱可自行修改，加入如下內容：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}
複製代碼

而後在tsconfig.json裏修改：

"extends": "./paths.json"
複製代碼

ok，完美解決。