webpack + ts 配置路徑別名無死角方法總結
阿新 • • 發佈:2021-02-20
# webpack + ts 配置路徑別名總結
自我體驗加總結:在配置腳手架時,定製別名很有必要,可以使得程式碼更優雅,可讀性更強。但在使用ts的時候,即便專案能夠執行,vscode 確時長會提示 `can’t find module xxx`。總結下來,如果想要完全解決這個問題需要考慮以下兩方面:
## 概述
### 語法上的正確性
* 此處主要是通過構建工具,如webpack、parcel、rollup等,在編譯時將路徑的別名進行替換、拼接。從而使得別名的引用能夠對映為正確的路徑。
### 環境的正確性
* eslint 環境:如果使用的js,未使用ts。則需要保證 eslint 的路徑別名配置正確,或者更改報警級別(通常不建議這麼做)
* typescript 環境:如果使用的是ts,多數情況下需要對 `tsconfig.json` 進行配置。
注:以上兩種環境並不一定需要同時配置,例如使用成熟的第三方腳手架時,往往只需要配置其中一種(大多數一其中的一種為基礎,自動同步)
## 具體應對
### 保證語法的正確性
* 原理則是通過類似於 `loader` 的工具,將別名與真實路徑進行替換。此處以 webpack.resolve.alias 進行配置,按照官方 API使用即可 [webpack.resolve.alias](https://www.webpackjs.com/configuration/resolve/#resolve-alias)
* 當無法直接修改 `webpack.config.js`,使用 第三方配置工具時候 (此處以craco 配置 create-react-app 為例), :
```js
// craco.config.js
const path = require('path');
module.exports = {
webpack: {
configure: (webpackConfig, { env, paths }) => {
let {src} = webpackConfig.resolve.alias;
webpackConfig.resolve.alias = Object.assign(webpackConfig.resolve.alias, {
'@': src,
'@components': path.resolve(src, 'components')
})
return webpackConfig;
}
}
}
```
### 保證環境的正確性:
#### typescript 環境
* tsconfig.json: 需要為 ts 宣告路徑對映表
```json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@typings/*": ["src/typings/*"],
"@components/*": ["src/components/*"],
"@style/*": ["src/style/*"],
"@utils/*": ["src/utils/*"],
"@router/*": ["src/router/*"],
"@store/*": ["src/store/*"],
}
}
}
```
* 此處需要注意,若使用的是第三方配置工具,則可能會複寫 `tsconfig.json`, 當發現修改的配置未生效時大概率會是這種情況,需要新建檔案,並新增 `extends` 欄位:
* tsconfig.extend.json 如下:
```json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@typings/*": ["src/typings/*"],
"@components/*": ["src/components/*"],
"@style/*": ["src/style/*"],
"@utils/*": ["src/utils/*"],
"@router/*": ["src/router/*"],
"@store/*": ["src/store/*"],
}
}
}
```
* 為 tsconfig.json 新增 extends 欄位:
```json
{
"extends": "./tsconfig.extend.json"
}
```
#### eslint 環境
* 如果是個人配置 eslint , 則需要 增加兩個外掛 `eslint-plugin-import eslint-import-resolver-alias`, [https://www.npmjs.com/package/eslint-import-resolver-alias](https://www.npmjs.com/package/eslint-import-resolver-alias)
```js
// .eslintrc.js
module.exports = {
settings: {
'import/resolver': {
alias: [
['@', './src/']
]
}
}
};
```
## 注意
* 當把需要配置的工作完成後,需要關閉 vscode 並重新啟動,才能生效。
* ts環境與es環境,有時只需要配置一