taro之--配置目录别名
Posted 瞬间的醒悟
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了taro之--配置目录别名相关的知识,希望对你有一定的参考价值。
alias
object
用于配置目录别名,从而方便书写代码引用路径。
例如,使用相对路径书写文件引用如下:
import A from '../../components/A'
import Utils from '../../utils'
import packageJson from '../../package.json'
import projectConfig from '../../project.config.json'
为了避免书写多级相对路径,我们可以如下配置 alias
:
module.exports =
// ...
alias:
'@/components': path.resolve(__dirname, '..', 'src/components'),
'@/utils': path.resolve(__dirname, '..', 'src/utils'),
'@/package': path.resolve(__dirname, '..', 'package.json'),
'@/project': path.resolve(__dirname, '..', 'project.config.json'),
,
通过上述配置,可以将 src/components
和 src/utils
目录配置成别名,将根目录下的 package.json
和 project.config.json
文件配置成别名,则代码中的引用改写如下:
import A from '@/components/A'
import Utils from '@/utils'
import packageJson from '@/package'
import projectConfig from '@/project'
为了让编辑器(VS Code)不报错,并继续使用自动路径补全的功能,需要在项目根目录下的 jsconfig.json
或者 tsconfig.json
中配置 paths
让编辑器认得我们的别名,形式如下:
"compilerOptions":
"baseUrl": ".",
"paths":
"@/components/*": ["./src/components/*"],
"@/utils/*": ["./src/utils/*"],
"@/package": ["./package.json"],
"@/project": ["./project.config.json"]
建议别名使用
@/
开头而非仅用@
开头,因为有小概率会与某些scoped
形式的npm
包(形如:@tarojs/taro, @babel/core)产生命名冲突。
taro alias 的使用
用来配置目录别名,从而方便书写代码引用路径。例如,使用相对路径书写文件引用如下:
import A from ‘../../componnets/A‘ import Utils from ‘../../utils‘
为了避免书写多级相对路径,我们可以如下配置 alias
:
alias: { ‘@components‘: path.resolve(__dirname, ‘..‘, ‘src/components‘), ‘@utils‘: path.resolve(__dirname, ‘..‘, ‘src/utils‘) }
通过上述配置,可以将 src
、src/components
以及 src/utils
目录配置成别名,则代码中的引用改写如下:
import A from ‘@components/A‘ import Utils from ‘@utils‘
.
以上是关于taro之--配置目录别名的主要内容,如果未能解决你的问题,请参考以下文章