常見別名（懶人路徑）設置

工做中， 因爲層級與代碼拆分的的原因， 常常會有引用本地文件。經常會遇到路徑層級過深且書寫繁瑣的問題。這裏對別名（又稱懶人路徑）進行一個總結。

Webpack

前端工程化項目中，最常使用的就是 webpack 了， webpack 中對別名作了很好的處理，相信大多數同窗都是知道如何配置， 直接上代碼

// webpack.config.js
const path = require('path')

module.exports = {
    resolve: {
    // 路徑別名, 懶癌福音
    alias: {
      app: path.join(__dirname, 'src/components')
    }
  }
}

這裏使用 path 來幫助咱們拼接一個絕對路徑。

經過對 webpack 別名設置後， 之前可能這麼引用：

import { Nav } from '../src/components'

由於 app 是使用絕對路徑進行拼接的， 因此如今不管在哪一個文件裏 都只須要這麼引用， 不用擔憂層級問題

import { Nav } from 'app/components'

Javascript

上面 webpack 的別名配置， 能幫助在很大程度咱們解決了引用困難繁瑣的問題。 但如今又有一種新的場景，webpack 的別名， 打包編譯時 webpack 是識別的， 但咱們的編輯器呢，例如 VScode ？ 可能在之前咱們在工做中找尋一個方法， 能夠直接經過 Alt/option + click 直接 進入當前引入的源位置。但是在設置了 webpack 別名以後， 這個別名 webpack 識別，但編輯器是不識別的。 這裏能夠經過 jsconfig.json 來解決這個問題

{
    "compilerOptions": {
        "baseUrl": ".",
    "paths": {
      "app/*": ["./src/components/*"]
    }
  },
  "exclude": ["node_modules"]
}

僅此配置後， 只要別名配置與 webpack 保持一致，那就能夠愉快的點擊路徑 進入引用的源文件了。

若是配置後並不能生效， 記得重啓一下編輯器

Babel

經過上面配置後， 基本能解決絕大部分的場景。 但若是項目較爲簡單， 只使用了 babel 並無使用 webpack ，這裏便又出現一個新的場景， 須要對 babel 進行配置。

babel 與 webpack 和 VScode 還不一樣， 那兩種狀況只須要直接配置便可， babel 中須要使用插件來解決這個問題

yarn add babel-plugin-module-resolver / npm i babel-plugin-module-resolver -S

配置以下：

// .babelrc.js
const path = require('path')

module.exports = {
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "app": path.join(__dirname, './src/components')
        }
      }
    ]
  ]
}

好了， 這三種方式基本上能幫助咱們應對一切別名場景。