背景

纯nodejs环境,直接使用tsc编译nodejs。源码目录是src,编译输出目录为bin。代码结构如下:

  • src
    • utils
      • a.ts
      • b.ts
    • config
  • bin
  • tsconfig.json

在其他深层次目录引用utils或者config下的文件时,总是要写一长串的'../../../../',还需要数数。这显然是不能接受的。用过webpack开发的小伙伴们,想想别名功能,typescript这种成熟框架不可能没有。于是百度一波,得到如下配置:

{
    "baseUrl": "./",                             
    "paths": {
      "@utils/*": [
        "src/utils/*"
      ],
      "@config/*": [
        "src/config/*"
      ],
    }
}

配置完之后,使用如下方式引用a.ts模块:

import A from '@utils/a';

发现我的vscode编辑器已经能识别这个路径了,当我按下ctrl点击路径的时候,也自动跳转到了a.ts文件。在赞叹自己纯熟的技术之余,把所有的深层次路径都换成了如上写法,自信回头运行npm run start:


一脸懵逼。查看bin目录编译后的js文件,发现typescript根本没有按照我的配置,在编译过程中把这个路径给优化掉。还是require('@utils/a'):

typescript不会对别名进行处理

在捣鼓了很久确定我的tsconfig配置没有问题后,我无奈又进行了百度,发现typescript根本不会对别名进行处理,只能借助第三方编译工具,例如babelwebpack

但是我一个简单的nodejs项目,一种编译器足矣,我为什么需要再去使用上述编译器?于是另一个解决方案(chao ji da ken)诞生了:

https://github.com/dividab/tsconfig-paths

另一个坑

对,就是tsconfig-paths,这个工具,我进入其github首页,发现有1k左右的星星。看了一下插件介绍,发现正是为了解决这个问题。使用说明也很简单,引用官方文档,就一句话:

哇,只要通过-r指令添加一个预处理,再运行编译后的模块就可以解决我的问题?兴冲冲的我立即npm i --save 操作一波, 发现还是出现如下问题:

这次确定是是走了他的预处理了。为什么还是不生效???翻看其文档,也找不到任何有用的信息。到这里,大多数小伙伴估计都放弃了,但是今晚耗上了,一个别名问题居然拖了我这么长时间,于是我开始了源码调试,找一下到底是什么原因。

调试tsconfig-paths

配置vscode调试器,添加运行参数:

 {
       "type": "pwa-node",
        "request": "launch",
        "name": "Launch Program",
        "skipFiles": [
            "<node_internals>/**"
        ],
        "runtimeArgs": [
            "-r",
            "${workspaceFolder}/node_modules/tsconfig-paths/register"
          ],
        "program": "${workspaceFolder}\\bin\\index.js"
  }

调试源码,发现其核心功能就是读取tsconfig文件,获取paths(别名)映射,覆写path._resolveFilename,匹配映射,解析获取真正的模块。嗯,倒是不复杂

我在这里加了个条件断点,找到了我的utils/common的模块请求,发现found为空…问题就出在这里了。于是进一步查找。发现其匹配规则没问题,只是匹配到之后,寻找模块时使用的路径居然是原始tsconfig中配置的src

我的运行目录明明在bin目录!

这也太不智能了,你好歹读一下tsconfig里的outDir属性吧!

现在没办法了,为了适配他的代码,只能修改tsconfig的paths配置如下:

{
    "baseUrl": "./",                             
    "paths": {
      "@utils/*": [
        "src/utils/*",
        "bin/utils/*"
      ],
      "@config/*": [
        "src/config/*",
        "bin/config/*"
      ],
    }
}

这样他拼接的时候就能找到我的模块了,问题终于解决!

总结

到此这篇关于typescript在node.js下使用别名(paths)无效问题详解的文章就介绍到这了,更多相关typescript在node.js使用别名无效内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

typescript在node.js下使用别名(paths)无效的问题详解的更多相关文章

  1. 使用typescript类型实现ThreeSum

    这篇文章主要介绍了使用typescript类型实现ThreeSum,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以一下,希望对你学习又是帮助

  2.  typeScript入门基础介绍

    这篇文章主要介绍了 typeScript入门基础,TypeScript 是由微软开发的开源、跨平台的编程语言,是 javaScript 的超集,最终被编译为 javaScript代码。常常被简称为TS支持JS、ES语法,下文将继续其他基础介绍,需要的朋友可以参考一下

  3. Android 极光推送别名与标签方式

    这篇文章主要介绍了Android 极光推送别名与标签方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  4. typescript返回值类型和参数类型的具体使用

    本文主要介绍了typescript返回值类型和参数类型的具体使用文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. 详解react阻止无效重渲染的多种方式

    这篇文章主要介绍了详解react阻止无效重渲染的多种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  6. Vue3 携手 TypeScript 搭建完整项目结构

    TypeScript 是JS的一个超级,主要提供了类型系统和对ES6的支持,使用 TypeScript 可以增加代码的可读性和可维护性,在 react 和 vue 社区中也越来越多人开始使用TypeScript,这篇文章主要介绍了Vue3 携手 TypeScript 搭建完整项目结构,需要的朋友可以参考下

  7. 关于TypeScript开发的6六个实用小技巧分享

    TypeScript是Javascrip t超集,支持静态类型检测,可以在编译期提前暴露问题,节省debug时间,下面这篇文章主要给大家介绍了关于TypeScript开发的6六个实用小技巧,需要的朋友可以参考下

  8. typescript+react实现移动端和PC端简单拖拽效果

    这篇文章主要为大家详细介绍了typescript+react实现移动端和PC端简单拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. Vue3 TypeScript 实现useRequest详情

    本文介绍了Vue3 TypeScript实现useRequest详情,useRequest可能是目前社区中最强大,最接地气的请求类 Hooks了。可以覆盖99%的网络请求场景,无论是读还是写,无论是普通请求还是分页请求,无论是缓存还是防抖节流,通通都能支持,关于其介绍需要的小伙伴可以参考一下

  10. Typescript中的数据类型实例总结

    ts中数据类型的定义是重点之一,所以必须明确ts有哪些数据类型,下面这篇文章主要给大家介绍了关于Typescript中数据类型的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部