在vue项目中,我们可以利用“@”来指代src目录,在普通webpack项目中,我们也可以通过配置webpack的config来指定路径别名,但是在typescript+webpack项目中我们该怎么配置别名呢?

参考文档https://www.tslang.cn/docs/handbook/module-resolution.html 可知typescript是通过tsconfig.json中的paths项来进行配置的。这里以配置“src”为项目src目录来作为演示。

tsconfig.json:

    "paths": {
"src/*":[
"src/*"
]
}

这将告诉编译器,在解析路径的时候统一将src解析为baseUrl下的src目录。

之后配置webpack:

  resolve: {
alias: {
'src': path.resolve(__dirname, "../src/") //src文件夹路径
},
},

如果你使用了tslint,还要配置tslint.json以告诉tslint将src加入白名单。

"rules": {
"no-implicit-dependencies":[true,["src"]],
"no-submodule-imports":[true,"src"],
},

typescript项目配置路径别名(路径映射)的更多相关文章

  1. 在TypeScript项目中进行BDD测试

    在TypeScript项目中进行BDD测试 什么是BDD? BDD(Behavior-Driven Design)是软件团队的一种工作方式,通过以下方式缩小业务人员和技术人员之间的差距: 鼓励跨角色协 ...

  2. vue项目,webpack中配置src路径别名及使用

    1.项目结构: 2.在build文件夹下的webpack.base.conf.js文件中设置src的路径别名. 3.在js文件或者vue文件的script标签中使用: (1).js文件中导入示例: ( ...

  3. webpack + ts 配置路径别名无死角方法总结

    webpack + ts 配置路径别名总结 自我体验加总结:在配置脚手架时,定制别名很有必要,可以使得代码更优雅,可读性更强.但在使用ts的时候,即便项目能够运行,vscode 确时长会提示 can' ...

  4. wamp配置虚拟路径(路径别名)

    wamp默认的路径是安装目录下的 www 目录, 如果你想运行php代码,就需要将代码放在 www 目录下, 但这样很不方便,能否通过配置的方式,来实现 在别的目录下的 php 代码,也能正常运行和访 ...

  5. tomcat配置外部静态资源映射路径

    一.背景 1.有一个录音软件每天生成很多新的录音文件. 2.现在想通过一个WEB项目页面下载这些录音文件. 3.很显然这些录音文件放在WEB项目下不是很合适(WEB项目更新是个大麻烦,海量的录音文件要 ...

  6. vue项目中的路径别名

    每次写引入组件的路径,如果路径嵌套比较深,那么会比较麻烦,我们可以在webpack.base.conf.js,中设置路径的别名,默认webpack设置src的别名为@ 建议配置src下一级目录的别名, ...

  7. react import 配置路径别名'@',简化import Component的方式

    摘要 在react中,大多数业务逻辑都组件化:极大的减轻了代码的冗余度,如果组件的层次比较深的话,组件的import就比较费劲,在import时使用“../../components/test”的方式 ...

  8. 【vue-cli 3.0】 vue.config.js配置 - 路径别名

    如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以 ...

  9. Linux配置和管理设备映射多路径multipath

    (一)多路径管理软件的由来 在企业中,服务器与存储通常是分开放置的,服务器上的硬盘通常用来安装操作系统和应用软件,业务数据则是存储在单独的存储设备上,那么,服务器与存储是如何连接的呢?根据存储协议,经 ...

随机推荐

  1. android什么时候会产生ANR

    ANR: Application No Response 1.界面操作(按钮点击)等待时间超过5秒 2.HandleMessage 回调函数中执行超过10秒(进行长时间处理不放在主界面,放在另一个线程 ...

  2. (原)Unreal渲染模块 管线 - 着色器(1)

    @author: 白袍小道 转载悄悄说明下 随缘查看,施主开心就好 说明: 本篇继续Unreal搬山部分的渲染模块的Shader部分, 主要牵扯模块RenderCore, ShaderCore, RH ...

  3. ironic state information

    参考: http://blog.csdn.net/zhonglinzhang/article/details/74202562 http://blog.csdn.net/wanghuiict/arti ...

  4. inspect流程

    当node节点state为manage时,可执行inspector ironic node-set-provision-state <node_uuid> manage ironic no ...

  5. RelativeLayout布局属性

    Android RelativeLayout属性 // 相对于给定ID控件 android:layout_above 将该控件的底部置于给定ID的控件之上; android:layout_below ...

  6. HDU 4758 Walk Through Squares( AC自动机 + 状态压缩DP )

    题意:给你两个串A,B, 问一个串长为M+N且包含A和B且恰好包含M个R的字符串有多少种组合方式,所有字符串中均只含有字符L和R. dp[i][j][k][S]表示串长为i,有j个R,在自动机中的状态 ...

  7. J2EE的十三个技术——EJB之概述

    含义: 企业级的JavaBeans(Enterprise JavaBean),其设计目标是部署分布式应用程序. EJB是J2EE的一部分,称为Java企业Bean,它把使用Java开发的服务器组件的部 ...

  8. Codeforces Round #387 (Div. 2) 747E

    这题本身是个水题,但是写了半天 题意就是给出一个树的生成方式,让你还原这棵树,然后按深度输出结点 这个还原过程还是比较有趣的(没有用递归) PS:getline的新姿势get #include < ...

  9. 洛谷 P3747 [六省联考2017]相逢是问候 解题报告

    P3747 [六省联考2017]相逢是问候 题目描述 \(\text {Informatik verbindet dich und mich.}\) 信息将你我连结. \(B\) 君希望以维护一个长度 ...

  10. rem、em、px之间的转换

    rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定. 我们知道,浏览器默认的字号16px,来看一些px单位 ...