当前位置：首页 > news >正文

vite与ts的结合

news 2025/10/7 5:14:24

vite与ts的结合

搭建环境

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./src/main.ts" type="module"></script>
</head><body></body></html>

console.log("hello");

npm init -y #初始化工程
npm i vite -D  #安装vite
npm run dev

说明: vite天生支持ts, 我们什么都没做, 就可以运行main.ts

TS的特点就是强类型绑定, 最大的作用就是提高代码的规范性

我们将数值类型的值赋值给字符串类型的变量, 在TS中肯定是不合法的, 而且编译器也给出了提示

但是这并不影响我们运行代码, 如果我们更强制的约束, 可以引入插件帮助把语法错误直接输出到控制台

npm install vite-plugin-checker -D

import { defineConfig } from "vite"
import check from "vite-plugin-checker"export default defineConfig({plugins: [check({typescript: true})]
})

该插件依赖TS, TS也需要配置文件

npm install typescript -D

// 配置一些ts的检查手段和规则
{"compilerOptions": {"skipLibCheck": true // 忽略对node_modules目录的检查}
}

重新运行项目, TS语法错误就会阻塞项目, 减少项目中的雷

由于语法错误最终打包失败, 但是在编译到错误错误之前, 还是执行了构建操作

对于大型项目, 边构建边校验这样很浪费时间, 我们希望先检验,再构建

{"name": "04vite-ts","version": "1.0.0","main": "index.js","scripts": {"dev": "vite","build": "tsc --noEmit && vite build","test": "echo \"Error: no test specified\" && exit 1"}
}

TS中使用环境变量会有以下坑

VITE_TARGET=http://www.baidu.com

这个报错是因为tsconfig中默认把ts编译为es3, 就不支持 import.meta属性了, 所以要配置一下

// 配置一些ts的检查手段和规则
{"compilerOptions": {"skipLibCheck": true, // 忽略对node_modules目录的检查"module": "ESNext" // 编译为最新的ES语法}
}

又发现找不到env属性

要通过声明文件解决这个问题

/*** 下面写的是 三斜线指令* readonly是只读的意思, 一般环境变量的值不希望被改*/
/// <reference types="vite/client" />
interface ImportMetaEnv {readonly VITE_TARGET: string
}

课程中是正常了, 而且我这里编译器也通过了

但是vite.config.ts文件报错了, 是因为vite不知道去哪找资源, 模块方案配置为node后, 默认去node_modules中寻找资源

// 配置一些ts的检查手段和规则
{"compilerOptions": {"moduleResolution": "node", // 模块解析方案"skipLibCheck": true, // 忽略对node_modules目录的检查"module": "ESNext" // 编译为最新的ES语法}
}