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

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

在使用最新版本的vite脚手架,生成的tsconfig配置会分出多个配置:tsconfig.json、tsconfig.app.json、tsconfig.node.json,需要改为原始的两个配置:tsconfig.json、tsconfig.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 天前
Webpack迁到Vite第十节:vite.config.js 开发与构建流转全链路
vue.js·webpack·vite
定栓3 天前
Webpack迁到Vite第二节:JSX 到 Render 函数
vue.js·webpack·vite
NetX行者5 天前
用 Vite + Vue3 + UnoCSS 搭建企业级项目模板(一):基础骨架
vue·vite·unocss
孟陬7 天前
不用盲调性能参数 Vitest 5.0 新推出 `vitest doctor` 一键诊断测试慢卡点,自动给出最优提速配置
性能优化·单元测试·vite
cindershade9 天前
大包不是一个数字:Vite 构建体积的责任归因与边界治理
vite
cindershade16 天前
首屏不是 dist:用“加载账本”治理 Vite 的大包
性能优化·vite
陪我一起学编程18 天前
vue3笔记
前端·webpack·vue3·vite·脚手架·vue3笔记·组件式
向北丶1 个月前
vite项目中配置alias别名
前端·vite