在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. groupSum6后向遍历

    http://codingbat.com/prob/p199368 public boolean groupSum6(int start, int[] nums, int target) { if( ...

  2. 剑指Offer - 九度1517 - 链表中倒数第k个结点

    剑指Offer - 九度1517 - 链表中倒数第k个结点2013-11-30 02:57 题目描述: 输入一个链表,输出该链表中倒数第k个结点.(hint: 请务必使用链表.) 输入: 输入可能包含 ...

  3. DOS程序员手册(十)

    终于到(十)了~~~ 503页 ES:DI       指向未更新且未打开的FCB的指针 注释:该功能最初用来从命令行中析取文件,并以正确的格式来保存此文件 以便打开FCB.为了实现这个目的,可首先将 ...

  4. shell之echo and printf

    #!/bin/sh _________echo___________#read name #echo "$name It is a test" #read命令从标准的输入中读取一行 ...

  5. 深入MySQL用户自定义变量:使用详解及其使用场景案例

    一.前言 在前段工作中,曾几次收到超级话题积分漏记的用户反馈.通过源码的阅读分析后,发现问题出在高并发分布式场景下的计数器上.计数器的值会影响用户当前行为所获得积分的大小.比如,当用户在某超级话题下连 ...

  6. Qt 中C++ static_cast 和 reinterpret_cast的区别

    1.C++中的static_cast执行非多态的转换,用于代替C中通常的转换操作.因此,被做为隐式类型转换使用.比如: int i; float f = 166.7f; i = static_cast ...

  7. 解决windows文件名过长无法删除的问题

    删除windows文件时,系统提示如下错误: 从网上找到下面的一种方法,顺利解决(原理不清楚),现记录删除方法如下: . 在要删除的文件夹(delete_dir)同级新建一个空文件夹(empty_di ...

  8. NYOJ 简单数据结构

    NYOJ 2 括号配对问题 栈的简单应用.可使用STL. #include <iostream> #include <cstdio> #include <cstring& ...

  9. springmvc项目搭建三-添加前端框架

    这几年前端框架发展可以说非常迅猛了...实际项目中也用到了几个,easyui相对来讲,算是我第一个接触的前端框架了,用的时候感觉很方便,省了很多代码量,一个好的前端框架可以为你省去很多精力在前端布局上 ...

  10. 【bzoj3866】The Romantic Hero dp

    题目描述 给你n个数,从中选出两个不相交非空集合S和T,使得S中的每一个元素都在T集合的前面,并且S集合中的所有数的亦或等于T集合中的所有数的与,求方案数 mod 10^9+7. 输入 The fir ...