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

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

tsconfig.json:

  1. "paths": {
  2. "src/*":[
  3. "src/*"
  4. ]
  5. }

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

之后配置webpack:

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

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

  1. "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. centos使用--开机启动

    centos6.8 1.利用 chkconfig 来配置启动级别 在CentOS或者RedHat其他系统下,如果是后面安装的服务,如httpd.mysqld.postfix等,安装后系统默认不会自动启 ...

  2. Python学习-day20 django进阶篇

    Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行 ...

  3. Oracle数据库存量数据抽取使用spool控制命令

    spool是oracle  sqlplus提供的一个控制命令.可以利用spool和select语句的组合动态生成一些失去了脚本或者一些数据. 1.spool作用: 在sqlplus中用来保存或打印查询 ...

  4. JAVA相似算法的运用

    今天要处理问题是把一个产品的名字按照其内容对比文档转换出它的中文名. 但是这个文档感觉不全,产品种类有多又杂. 如果像这样写的话 if(xxx.contains()) else if() ... 不知 ...

  5. jquery实现京东淘宝首页的轮番效果图

    主要是绑定事件以及实现自动滚轮 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  6. java与C#对比文章阅读

    文章:JAVA与C#的区别 讲了C#与java一些基本异同.    易语言官网有个表,比较了易语言.Java.C#的区别,比较全面可以借鉴.    

  7. DevExpress的GridControl控件设置自定义显示方法

    比如要显示性别为字符串,数据库中保存为数值(1:男,2:女,3:未知). 方法一: 点击控件上的"Run Designer"按钮,进入设计界面. 选择“Columns", ...

  8. 重写Android相机适配不同的设备,对于相机旋转角度问题解决方案

    Android开发中经常需要重写相机,由此会导致一些旋转的情况(不同的设备摄像头角度是不一样的),此处按照解决思路给出解决方案: 情形一:只需要旋转摄像头方向以及最终的照片,注意两者需要保持一致 1. ...

  9. RabbitMQ高可用镜像队列

    ## RabbitMQ高可用镜像队列 在分布式系统中,通常使用多个术语来标识主要副本和辅助副本.本指南通常使用"主"来引用队列的主要副本,而对于辅助副本则使用"镜像&qu ...

  10. 262144 (game)

    262144 (game) 题目描述 Bessie likes downloading games to play on her cell phone, even though she does fi ...