Taro alias

2021-09-23 21:03 更新

alias

object

用于配置目录别名,从而方便书写代码引用路径。

例如,使用相对路径书写文件引用如下:

  1. import A from '../../componnets/A'
  2. import Utils from '../../utils'
  3. import packageJson from '../../package.json'
  4. import projectConfig from '../../project.config.json'

为了避免书写多级相对路径,我们可以如下配置 alias

  1. module.exports = {
  2. // ...
  3. alias: {
  4. '@/components': path.resolve(__dirname, '..', 'src/components'),
  5. '@/utils': path.resolve(__dirname, '..', 'src/utils'),
  6. '@/package': path.resolve(__dirname, '..', 'package.json'),
  7. '@/project': path.resolve(__dirname, '..', 'project.config.json'),
  8. }
  9. }

通过上述配置,可以将 src/componentssrc/utils 目录配置成别名,将根目录下的 package.jsonproject.config.json 文件配置成别名,则代码中的引用改写如下:

  1. import A from '@/components/A'
  2. import Utils from '@/utils'
  3. import packageJson from '@/package'
  4. import projectConfig from '@/project'

为了让编辑器(VS Code)不报错,并继续使用自动路径补全的功能,需要在项目根目录下的 jsconfig.json 或者 tsconfig.json 中配置 paths 让编辑器认得我们的别名,形式如下:

  1. {
  2. "compilerOptions": {
  3. "baseUrl": ".",
  4. "paths": {
  5. "@/components/*": ["./src/components/*"],
  6. "@/utils/*": ["./src/utils/*"],
  7. "@/package": ["./package.json"],
  8. "@/project": ["./project.config.json"],
  9. }
  10. }
  11. }

建议别名使用 @/ 开头而非仅用 @ 开头,因为有小概率会与某些 scoped 形式的 npm 包(形如:

@tarojs/taro@babel/core)产生命名冲突。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号