（06）vite与ts的结合

文章目录

- 系列全集
- package.json
- 在根目录创建 `tsconfig.json` 文件
- 在根目录创建 `vite.config.ts` 文件
- index.html
- 额外的类型声明

系列全集

（01）vite 从启动服务器开始
（02）vite环境变量配置
（03）vite 处理 css
（04）vite 插件 plugins
（05）vite处理静态文件及引入

package.json

{"name": "vite","version": "1.0.0","main": "index.js","license": "MIT","scripts": {"dev": "vite","build": "tsc --noEmit && vite build","preview": "vite preview","test": "vite --mode test"},"devDependencies": {"typescript": "^5.4.5","vite": "^5.0.0","vite-plugin-checker": "^0.6.4"},"dependencies": {}
}

需要安装typescript 和 vite-plugin-checker

另外 build 命令中，新增了 tsc --noEmit 表明在打包时，如果有类型出错，不会生成打包文件，不会执行后面的 vite build 命令

在根目录创建 `tsconfig.json` 文件

{"compilerOptions": {"skipLibCheck": true // 跳过node——module的验证}
}

让 ts 在验证代码时，跳过node_module的文件

在根目录创建 `vite.config.ts` 文件

import {defineConfig} from 'vite';
import checker from 'vite-plugin-checker';export default defineConfig({plugins: [checker({typescript: true,})]
});

通过 vite-plugin-checker 中的 checker ，来与vite结合。

index.html

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

引入main.ts文件而不是js文件

额外的类型声明

在开发中，可能还需要声明更多的类型与vite结合
在根目录下创建 vite-env.d.ts文件进行声明

interface ImportMetaEnv {readonly VITE_APP_API_URL: string;readonly VITE_APP_API_KEY: string;
}

ImportMetaEnv 会被vite引入，并在获取vite的env.meta.xxx时被类型注入

在这里插入图片描述

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

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