在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. 内存压缩PK页面交换 解决内存问题谁更在行

    一台服务器能够支持的虚拟机数量通常取决于物理硬件所能够提供的可用计算资源.大多数资源, 比如处理器周期.存储I/O和网络带宽等,都能够相对简单地进行共享.这种做法的原理在于负载并不总是处于忙碌状态,因 ...

  2. java线上编程网站

    自带测试 http://codingbat.com/prob/p145416

  3. Windows下安装jenkins,关闭jenkins,修改jenkins端口号

    1.Jenkins安装部署 在官网下载Jenkins: https://jenkins.io/download/thank-you-downloading-windows-installer-stab ...

  4. 利用Xtrabackup搭建GTID主从复制(一主一从)

      Preface       I've been demonstrated how to implement a master-slave structure using mysqldump in ...

  5. Jforum环境之Tomcat环境搭建

    Jforum环境搭建,需先安装JDK.JRE.Tomcat.Mysql(JDK.JRE暂不做说明).本文先说Tomcat环境搭建 1.进入Apache Tomcat官网下载,我选择的是免安装的zip包 ...

  6. [OpeCV] highgui头文件

    通过HighGUI(high-level graphical user interface)可以实现打开窗口.显示图像.读出和写入图像文件,处理鼠标.光标.键盘事件. 而HighGUI主要分成“视频输 ...

  7. 文件i/o函数 open/close

    一:open open函数可以打开或创建一个文件. #include <sys/types.h> #include <sys/stat.h> #include <fcnt ...

  8. ocrosoft Contest1316 - 信奥编程之路~~~~~第三关 问题 P: 【数组】1234方阵(phalanx)

    http://acm.ocrosoft.com/problem.php?cid=1316&pid=15 题目描述 编程打印如下规律的n*n方阵.输入n,按规律输出方阵. 方阵规律如下图:使左对 ...

  9. VB.NET视频总结——基础篇

    VB.NET视频是台湾讲师曹祖胜和林煌章共同带来的经典视频,视频中老师的台湾腔特别重,听起来有些别扭.而且对于计算机方面的术语翻译的与大陆有很大差异,所以刚开始看视频的时候总是进入不了状态,一头雾水的 ...

  10. WSingle主题 – 可能是最好的WordPress小说主题,美观大方,功能强大

    今天,waitig给大家带来了一款强大WordPress小说主题 – WSingle主题. 一.概览 WSingle主题2.0版本已经发布,点击查看详情:[重磅]WSingle主题2.0版本发布,新增 ...