常见别名（懒人路径）设置

工做中， 因为层级与代码拆分的的原因， 常常会有引用本地文件。经常会遇到路径层级过深且书写繁琐的问题。这里对别名（又称懒人路径）进行一个总结。

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')
        }
      }
    ]
  ]
}

好了， 这三种方式基本上能帮助咱们应对一切别名场景。