【typescript - tsc 编译后路径问题/路径别名问题】

这几天在写typescript,遇到个路径依赖问题,编写的.ts文件直接运行OK,但是编译成.js后,运行提示 Error: Cannot find module xxx,📝记录分析和解决过程 。

问题描述

原始文件,有index.ts 其会引用src/say.ts,如下所示,

// index.ts
import { sayHi } from "src/say";
console.log(sayHi());
// src/say.ts
export function sayHi() {return "hi";
}
// tsconfig.json
{"compilerOptions": {"baseUrl": "./","outDir": "./build","experimentalDecorators": true,"lib": ["es2015", "es2016", "es2017.object", "es2020.Promise", "esnext.asynciterable", "dom"],"module": "commonjs","moduleResolution": "node","noImplicitAny": false,"sourceMap": true,"strict": true,"strictPropertyInitialization": false,"target": "es2017",},"compileOnSave": true,"exclude": ["node_modules/**/*", "**/*.d.ts", "test"],"include": ["src/**/*", "./index.ts"],
}

如果直接运行 npx tsx index.ts ,可以直接运行。

但是如果先编译npx tsc 得到build文件夹以及编译的js文件后,运行 node build/index.js,则会报错

node:internal/modules/cjs/loader:942throw err;^Error: Cannot find module 'src/say'
Require stack:

原因分析

当使用npx tsx index.ts时,会参考tsconfig.json文件中baseUrl (或paths)参数,找到src路径。但是使用tsc编译后,这部分信息并不会体现在编译后的build文件里面,此时再执行node build/index.js 则会提示找不到模块。

进一步说,这个问题 本质是别名问题 ,tsc不会转换路径别名。也看到网上有这么评价tsc,

  • tsc不会转换路径别名,其实也是因为tsc的定位就是在开发阶段中使用的一个工具。

下一步,我们需要找到一种方式,让编译后的文件路径是正常的。

解决方案

方式1 修改引用路径

这种比较简单直接,不改变编译工具,还用tsc,引用时把相对路径加上 ,则编译后的路径依赖是正常的。

// index.ts
// import { sayHi } from "src/say"; noimport { sayHi } from "./src/say"; // yes
console.log(sayHi());

方式2 打包

不动代码,把项目整体打包成一个文件。以webpack打包工具举例。

npm install --save-dev webpack webpack-cli
npm install --save ts-loader

webpack配置文件

// webpack.config.js
const path = require("path");module.exports = {entry: "./index.ts",module: {rules: [{test: /\.tsx?$/,use: "ts-loader",exclude: /node_modules/,},],},resolve: {extensions: [".tsx", ".ts", ".js"],preferRelative: true,},output: {filename: "bundle.js",path: path.resolve(__dirname, "dist"),},
};

执行打包

npx webpack

打包后得到node dist/bundle.js,运行也是正常的。也不会再报路径模块找不到的问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/17095.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小白不知道怎么投稿?记住这个好方法

作为一名单位信息宣传员,我最初踏上这条道路时,满心憧憬着通过文字传递我们单位的精彩瞬间,让社会听见我们的声音。然而,理想与现实之间的距离,却在一次次邮箱投稿的石沉大海中渐渐清晰。那时的我,像所有“小白”一样,以为只要用心撰写稿件,通过电子邮件发给各大媒体,就能收获满…

Python考试复习--day2

1.出租车计费 mile,waitmap(int,input().split(,)) if mile<3:money13wait*1 elif mile>3 and mile<15:money13(mile-3)*2.3wait*1 else:money1312*2.3(mile-15)*2.3*(10.5)wait*1 print({:.0f}.format(money)) 【知识点1】&#xff1a; map() 函数 【知识点1】&…

设计模式 20 中介者模式 Mediator Pattern

设计模式 20 中介者模式 Mediator Pattern 1.定义 中介者模式&#xff08;Mediator Pattern&#xff09;是一种行为型设计模式&#xff0c;它通过封装对象之间的交互&#xff0c;促进对象之间的解耦合。中介者模式的核心思想是引入一个中介者对象&#xff0c;将系统中对象之间…

Vue中,点击提交按钮,路由多了个问号

问题 当点击提交按钮是路由多了问号&#xff1a; http://localhost:8100/#/ 变为 http://localhost:8100/?#/原因 路由中出现问号通常是由于某些路径或参数处理不当造成的。在该情况下&#xff0c;是因为表单的默认行为导致的。提交表单时&#xff0c;如果没有阻止表单的默…

Kubernetes数据存储

1. 数据存储 容器的生命周期可能很短&#xff0c;会被频繁地创建和销毁。那么容器在销毁时&#xff0c;保存在容器中的数据也会被清除。这种结果对用户来说&#xff0c;在某些情况下是不乐意看到的。为了持久化保存容器的数据&#xff0c;kubernetes引入了Volume的概念。 Volu…

HTML-JavaWeb

目录 1.标题排版 2.标题样式 ​编辑 ​编辑 小结 3.超链接 4.正文排版 ​编辑​编辑​编辑5.正文布局 6.表格标签 7.表单标签 8.表单项标签 1.标题排版 ● 图片标签 :< img> src:指定图像的ur1(绝对路径/相对路径) width:图像的宽度(像素/相对于父元素的百…

【AD21】文件的整理

当所有文件输出完成后&#xff0c;需要对不同的文件去做一个整理&#xff0c;方便后续工作的交接。 在项目工程文件夹下新建名称为BOM、SMT、PRJ、Gerber和DOC的文件夹。 BOM文件夹存放BOM表发给采购人员。SMT文件夹存放装配图文件和坐标文件发给贴片厂。PRJ文件夹存放工程文件…

汇凯金业:纸黄金和实物黄金的价格有什么区别

纸黄金和实物黄金的价格主要受到全球黄金市场行情的影响&#xff0c;二者的基础价格并无太大差异&#xff0c;但在具体交易时&#xff0c;可能会存在一些价格上的区别&#xff0c;这些差异主要来自以下几个方面&#xff1a; 交易费用与管理费&#xff1a;纸黄金交易通常需要支…

【Java】IdentityHashMap 的使用场景

文章目录 前言1. Druid 应用场景2. IdentityHashMap 特性3. IdentityHashMap 同步化4. IdentityHashMap 处理key为空值后记 前言 最近有兴趣看一下 Druid 连接池怎么做连接管理的&#xff0c;看到一个类 IdentityHashMap &#xff0c;这里记录一下使用场景。 1. Druid 应用场…

【物联网实战项目】STM32C8T6+esp8266/mqtt+dht11+onenet+uniapp

一、实物图 前端uniapp效果图&#xff08;实现与onenet同步更新数据&#xff09; 首先要确定接线图和接线顺序&#xff1a; 1、stm32c8t6开发板连接stlinkv2下载线 ST-LINK V2STM323.3V3.3VSWDIOSWIOSWCLKSWCLKGNDGND 2、ch340串口连接底座&#xff08;注意RXD和TXD的连接方式…

NSS题目练习4

[LitCTF 2023]1zjs 打开后是一个游戏&#xff0c;用dirsearch扫描&#xff0c;什么都没发现 查看源代码搜索flag&#xff0c;发现没有什么用 搜索php&#xff0c;访问 出现一堆符号&#xff0c;看样子像是jother编码 解码得到flag&#xff0c;要删掉[] [LitCTF 2023]Http pro …

嵌入式学习记录5.27(c++基础1)

目录 一.C和C的区别 二.输入输出流类 2.1输出cout 2.2输入cin 三.命名空间 2.1使用命名空间中的标识符 2.2命名空间中声明函数 2.3命名冲突问题 2.4匿名空间 2.5命名空间添加&#xff0c;嵌套&#xff0c;重命名 四.字符串的使用 4.1string类 4.2C风格和C风格字符串…

Java面试八股之线程池是怎么实现的

线程池是怎么实现的 线程池是一种基于池化技术的线程管理方式&#xff0c;通过预先创建一定数量的线程并保持在池中待命&#xff0c;从而在有任务来临时能够快速分配线程处理任务&#xff0c;而无需频繁创建和销毁线程&#xff0c;以此达到提升系统性能、减少资源消耗的目的。…

推荐《从零开始大模型开发与微调》

大模型是深度学习是当前AI和NLP研究与产业中最重要的方向之一。 本书用PyTorch 2.0作为学习大模型的基本框架&#xff0c;以ChatGLM为例详细讲解大模型的基本理论、算法、程序实现、应用实战以及微调技术&#xff0c;为读者揭示大模型开发技术。 《从零开始大模型开发与微调&…

Windows10映射网络驱动器之后不显示映射盘

目录 背景解决步骤1、按 Windows R 打开运行2、打开注册表编辑器3、 System上新建-- DWORD(32bit)4、对新建的文件重命名5、将EnableLinkedConnections的数值改为16、退出注册表编辑器&#xff0c;重启系统。 知识扩展断开连接备份注册表 背景 目前有一台NAS服务器,和一台lin…

工厂模式的三种实现方式

文章目录 1.引出工厂模式具体需求 2.传统模式1.类图2.目录结构3.pizzastore 用于设计pizza1.Pizza.java 抽象的Pizza类型2.CheesePizaa.java CheesePizaa3.GreekPizza.java GreekPizza 4.order 用于订购和制作pizza1.OrderPizza.java 制作pizza2.PizzaStore.java 订购pizza 5.优…

【Redis】 关于列表类型

文章目录 &#x1f343;前言&#x1f340;常见操作命令介绍&#x1f6a9;lpush&#x1f6a9;lpushx&#x1f6a9;rpush&#x1f6a9;rpushx&#x1f6a9;lrange&#x1f6a9;lpop&#x1f6a9;rpop&#x1f6a9;lindex&#x1f6a9;linsert&#x1f6a9;llen&#x1f6a9;lrem&…

“按摩”科技?

都说A股股民是特别善于学习的&#xff0c;这不市场又现新概念——“按摩科技”&#xff0c;成立仅6年&#xff0c;把上门按摩干到35亿营收也是没谁了&#xff0c;现在号称有1000万用户&#xff0c;3万家入驻商户数的按摩平台&#xff0c;难道就凭借2.5万名女技师&#xff0c;活…

【Django】中间件实现钩子函数预处理和后处理,局部装饰视图函数

在app文件夹里新建middleware.py继承MiddlewareMixin&#xff0c; 编写中间件类&#xff0c;重写process_request、process_response钩子函数 from django.http import HttpRequest, HttpResponse from django.utils.decorators import decorator_from_middleware from django…

关于pytest中用例名称使用中文乱码的解决

场景&#xff1a;使用pytest.mark.parametrize装饰器为用例自定义名称时&#xff0c;运行显示乱码。如下图所示&#xff1a; 解决方案&#xff1a; 1.在根目录 pytest.ini中增加一行代码 [pytest] disable_test_id_escaping_and_forfeit_all_rights_to_community_supportTrue…