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

Posted 2020-12-14 vant850

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

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

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