typescript项目配置路径别名(路径映射)
在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项目配置路径别名(路径映射)的更多相关文章
- 在TypeScript项目中进行BDD测试
在TypeScript项目中进行BDD测试 什么是BDD? BDD(Behavior-Driven Design)是软件团队的一种工作方式,通过以下方式缩小业务人员和技术人员之间的差距: 鼓励跨角色协 ...
- vue项目,webpack中配置src路径别名及使用
1.项目结构: 2.在build文件夹下的webpack.base.conf.js文件中设置src的路径别名. 3.在js文件或者vue文件的script标签中使用: (1).js文件中导入示例: ( ...
- webpack + ts 配置路径别名无死角方法总结
webpack + ts 配置路径别名总结 自我体验加总结:在配置脚手架时,定制别名很有必要,可以使得代码更优雅,可读性更强.但在使用ts的时候,即便项目能够运行,vscode 确时长会提示 can' ...
- wamp配置虚拟路径(路径别名)
wamp默认的路径是安装目录下的 www 目录, 如果你想运行php代码,就需要将代码放在 www 目录下, 但这样很不方便,能否通过配置的方式,来实现 在别的目录下的 php 代码,也能正常运行和访 ...
- tomcat配置外部静态资源映射路径
一.背景 1.有一个录音软件每天生成很多新的录音文件. 2.现在想通过一个WEB项目页面下载这些录音文件. 3.很显然这些录音文件放在WEB项目下不是很合适(WEB项目更新是个大麻烦,海量的录音文件要 ...
- vue项目中的路径别名
每次写引入组件的路径,如果路径嵌套比较深,那么会比较麻烦,我们可以在webpack.base.conf.js,中设置路径的别名,默认webpack设置src的别名为@ 建议配置src下一级目录的别名, ...
- react import 配置路径别名'@',简化import Component的方式
摘要 在react中,大多数业务逻辑都组件化:极大的减轻了代码的冗余度,如果组件的层次比较深的话,组件的import就比较费劲,在import时使用“../../components/test”的方式 ...
- 【vue-cli 3.0】 vue.config.js配置 - 路径别名
如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以 ...
- Linux配置和管理设备映射多路径multipath
(一)多路径管理软件的由来 在企业中,服务器与存储通常是分开放置的,服务器上的硬盘通常用来安装操作系统和应用软件,业务数据则是存储在单独的存储设备上,那么,服务器与存储是如何连接的呢?根据存储协议,经 ...
随机推荐
- shell判断文件是否存在[转]
原文出处: http://canofy.iteye.com/blog/252289 shell判断文件,目录是否存在或者具有权限 #!/bin/sh myPath="/var/log/htt ...
- 《Cracking the Coding Interview》——第1章:数组和字符串——题目2
2014-03-18 01:30 题目:反转一个char *型的C/C++字符串. 解法:一头一尾俩iterator,向中间靠拢并且交换字符. 代码: // 1.2 Implement a funct ...
- Android数据储存之SharedPreferences总结
写在前面:本文是我参考李刚老师的<疯狂Android讲义>以及API所写的读书笔记,在此表示感谢,本人小白,如有错误敬请指教. SharedPreferences的使用背景: 有时候,应用 ...
- react生命周期方法
Mounting阶段,当一个组件的实例被创建并插入到DOM中时,下面这些函数会被调用: constructor() componentWillMount:组件即将被渲染到页面上,render之前最后一 ...
- 第六章 系统配置:DHCP和自动配置
系统配置:DHCP和自动配置 写在开头:今天和导师见了个面,抛给我一堆材料以及论文,感觉自己学业更加繁重.有些知识现阶段我可能没办法掌握,但是至少在我需要进一步理解它的时候,要知道在哪个地方能够找到. ...
- Mifare简介
Mifare简介 MIFARE是NXP的知名品牌,是一个应用广泛的非接触式IC产品(13.56MHz非接触性辨识技术),一个典型的通信距离为10厘米,在全球有40多个不同的应用领域.有2.6亿个读写器 ...
- Android中如何为自定义控件增加状态?
在android开发中我们常常需要对控件进行相关操作,虽然网上已有很多对控件酷炫的操作,但小编今天给大家分享的纯属实用出发.在查看了一些列安卓教程和文档后,发现了一位大牛分享的非常不错的有关andro ...
- [poj] 1066 Treasure Hunt || 判断直线相交
原题 在金字塔内有一个宝藏p(x,y),现在要取出这个宝藏. 在金字塔内有许多墙,为了进入宝藏所在的房间必须把墙炸开,但是炸墙只能炸每个房间墙的中点. 求将宝藏运出城堡所需要的最小炸墙数. 判断点和直 ...
- 《c程序设计语言》-2.9
#include <stdio.h> /*int bitcount(unsigned x) { int b; for(b = 0;x != 0;x >>= 1) { if(x ...
- altera ip 核小究
用quartus的MegaWizard工具生成一个乘法器multiplier,会在工程目录下产生 multiplier.qip (可选) multiplier_bb.v (可选) multip ...