文章目录
- 系列全集
- 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时被类型注入
