webpack + ts 配置路徑別名無死角方法總結

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
• 當沒法直接修改 webpack.config.js，使用 第三方配置工具時候 (此處以craco 配置 create-react-app 爲例), ：

// 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 聲明路徑映射表

{
  　　"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 以下：

{
  　　"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 字段：

{
  "extends": "./tsconfig.extend.json"
}

eslint 環境

• 若是是我的配置 eslint , 則須要 增長兩個插件 eslint-plugin-import eslint-import-resolver-alias， https://www.npmjs.com/package/eslint-import-resolver-alias

// .eslintrc.js
module.exports = {
  settings: {
    'import/resolver': {
      alias: [
        ['@', './src/']
      ]
    }
  }
};

注意

• 當把須要配置的工做完成後，須要關閉 vscode 並從新啓動，才能生效。
• ts環境與es環境，有時只須要配置一項便可