工作中, 由于层级与代码拆分的的缘由, 经常会有引用本地文件。常常会遇到路径层级过深且书写繁琐的问题。这里对别名(又称懒人路径)进行一个总结。
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')
}
}
]
]
}
好了, 这三种方式基本上能帮助我们应对一切别名场景。