前言

在專案的開發過程中我們總會出現這樣的問題：

import { AModule } from '../../module';
import { BEnum } from '../../../enumFile';
import { CConst } from '../../constsFile';

也就是如果我們的元件巢狀多，子元件想要使用頂層 app 定義的一些全域性列舉或者常量以及一些其他資料的時候，使用相對路徑引用的時候往往會比較繁雜，並且使引入路徑程式碼看起來很繁瑣。

那現在就以 Angular 專案中的解決此問題的方式來解答這種問題。

解決

首先想到的就是使用絕對路徑引入不就解決相對路徑引入的 /../

import { AModule } from 'src/app/module';
import { BEnum } from 'src/app/emum/enumFile';
import { CConst } from 'src/app/constsFile';

當然這也是一種解決問題的方式，但是我們想要的肯定不是這樣。

尤其是在 app 路徑下，細分了不同的檔案後，我們又需要多加一層，比如 src/app/someFolder

所以我們會給路徑新增一個別名 alias ：

webpack 中

在 webpack.config.js 檔案中

const path = require('path'
 
);

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },
};

現在匯入就可以從：

import Utility from '../../utilities/utility';

變更為：

import Utility from 'Utilities/utility';

當然還有其他用法，更詳細的檢視

Angular 專案中

雖然我們知道 Angular cli 內部是基於 webpack 實現的，但是預設是沒有 webpack 的配置檔案 webpack.config.js 的，所以我們需要：

使用 tsconfig.json 來配置。在 angular-cli 生成的專案修改如下：

在根目錄下的 tsconfig.json :

{
  // ...
  "compilerOptions": {
    "baseUrl": "./",
    // ...
    "paths": {
      "@shared/*": ["src/app/shared/*"],
      "@app/*": ["src/app/*"]
    }
  }
}

然後在使用到的地方就可以從別名引入了：

import { OffsetUnit } from '@shared/constants';

如果 VScode 提示 找不到模組“@shared/constants”或其相應的型別宣告 可以通過重啟 VScode 來解決此問題。

總結

學好 webpack，走天下。