为项目添加路径映射即使用 @* 来替换相对路径

存在的问题以及解决方式

在项目中会遇到目录结构嵌套比较深的情况,这样会导致最深处的文件想引用根目录或者外层的资源会有这样的情况:

import { SomeInfo, SomeTypeInfo } from '../../../../../entities';

上层路径过多,导致使用了好几处 ../ 。造成的问题一个是难以一下子看出引用资源 SomeInfo 的目录地址,二是不美观。

我们可以通过配置 tsconfig.jsonpaths 属性来解决这个问题:
比如:

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./",
    // ...
    "paths": {
      "@shared/*": ["src/app/shared/*"],
      "@app/*": ["src/app/*"]
    }
  },
  "angularCompilerOptions": {}
}

这样,如果我们需要引用 src/app/entities 下的资源,只需要:
import { SomeInfo, SomeTypeInfo } from '@app/entities';
一定程度上更加清晰。也更加美观。

注意事项

需要注意的是 paths 是相对于 baseUrl 进行解析。 如果 baseUrl 被设置成了除 . 外的其它值,那么映射必须要做相应的改变。 如果你在上例中设置了 "baseUrl": "./src",那么 app 应该映射到 app/*

当然,通过 paths 我们还可以指定复杂的映射,包括指定多个回退位置。这个可以查阅官方文档

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值