0
点赞
收藏
分享

微信扫一扫

使用别名缩短 Webpack 中的导入路径

假设您正在使用 ​​Webpack​​ 捆绑您的应用程序。如果您认为在导入给定文件时使用相对路径很难看,并且在更改目录结构时很难维护:

import { formatDate } from '../../../root/lib/formatDate'

那么使用别名就是解决方案之一。

别名(​​alias​​)是 webpack 的一种方便的方式,可以减少导入常用模块的时间和按键次数。除此之外,通过别名的方式来映射一个路径,从而减少⽂件搜索范围可以优化 webpack 的打包速度。

您将需要 node.js 中包含的 ​​path​​ 模块,因为这是告诉 webpack 在哪里查找这些特定文件的方式。

使用 ​​resolve.alias​​ 属性,您可以为频繁导入的模块定义别名。下面是一个例子:

const path = require('path')

function resolve(dir) {
return path.join(__dirname, dir)
}

module.exports = {
resolve: {
alias: {
Library: resolve('root/lib/'),
Single: resolve('root/test.js')
}
}
}

因此,现在当您想要从库模块导入文件时,可以使用 ​​import { file } from 'Library/fileLocation​​​,或者如果您将文件包含在别名中,则从 ​​import { test } from 'Single'​​。

使用别名作为布尔值

如果您已经通过 CDN 为您的应用程序加载了一个库,并且将其作为依赖项,那么这将在您的应用程序中产生冲突。因此,您可以在 ​​resolve.alias​​​ 属性中列出冲突模块的路径,并将其设置为 ​​false​​ 以解决冲突。

module.exports = {
resolve: {
alias: {
"path/to/ignored/module": false
}
}
}

使用 ​​$​​ 进行精确匹配

您可以在别名定义中添加尾随 ​​$​​,这样可以确保如果路径不完全匹配,则强制执行错误。

const path = require('path')

function resolve(dir) {
return path.join(__dirname, dir)
}

module.exports = {
resolve: {
alias: {
Single$: resolve('root/test.js')
}
}
}

所以现在当你尝试导入 test.js 时:

import Test from 'Single' // success
import Test2 from 'Single/test.js' // error,root/test.js 无效

举报

相关推荐

0 条评论