常见别名(懒人路径)设置

Posted vant850

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了常见别名(懒人路径)设置相关的知识,希望对你有一定的参考价值。

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

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 进行配置。

babelwebpackVScode 还不同, 那两种情况只需要直接配置即可, 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‘)
        }
      }
    ]
  ]
}

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

以上是关于常见别名(懒人路径)设置的主要内容,如果未能解决你的问题,请参考以下文章

Typescript 路径别名在运行时未正确解析

Vite+Vue3设置路径别名

VueCli4构建项目如何配置文件路径别名?

永久别名的设置

vue session设置别名

egg支持路径别名@