最新vite脚手架配置ts-node工具

在使用最新的vite脚手架进行vue组件开发时,编写的ts文件工具函数的测试,除了应用到组件中进行页面测试,也可以使用ts-node工具进行单独的测试。

在使用最新版本的vite脚手架,生成的tsconfig配置会分出多个配置:tsconfig.jsontsconfig.app.jsontsconfig.node.json,需要改为原始的两个配置:tsconfig.jsontsconfig.node.json,不然执行ts-node会报错。

具体操作如下:

全局安装:

shell 复制代码
npm i -g ts-node

执行ts-node命令 会在项目根路径下找tsconfig.json中包含的应用配置,而最新vite脚手架生成的ts的应用配置放在了tsconfig.app.json中。为了方便测试,改成原来的形式,即:tsconfig.json中包含应用配置。

tsconfig.json

json 复制代码
{
	... // app配置
	"ts-node": {
		"esm": true
	},
	"references": [{ "path": "./tsconfig.node.json" }]
}

还要注意!导入的ts文件的后缀不能省略,不然会报找不到导入的模块!

拿咱们tree组件的树结构拍平函数做一个测试:


相关推荐
今禾3 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的3 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
FliPPeDround2 天前
@uni-helper 社区:让 uni-app 拥抱 ESM 时代
前端·uni-app·vite
hans7748829682 天前
通过为前端项目接入GeoGebra,初步研究AI时代数学教案的生成方案
前端·vite·babel
Mr_兔子先生3 天前
2025盛夏版:基于electron37+vite7的React桌面客户端保姆教程
react.js·electron·vite
布兰妮甜3 天前
Vite:下一代前端构建工具的革命
前端·javascript·vite·构建工具
阿琳a_6 天前
解决vue中使用vite-plugin-cesium插件打包后运行项目报错
前端·javascript·vue.js·vite·cesium
Yodame6 天前
webpack+vite前端构建工具全掌握(完结篇)
前端·vite
孤独的根号_10 天前
Vite背后的技术原理🚀:为什么选择Vite作为你的前端构建工具💥
前端·vue.js·vite
不想当小卡拉米12 天前
VITE中的环境变量和模式
vite