为环境变量自动生成类型定义

在开发前端 web 项目时，我们经常需要使用环境变量，而 vite 作为最近非常流行的构建工具，它支持 .env 环境变量配置文件，同时还支持配置环境变量的类型，仅需要在 src/vite-env.d.ts 创建接口 ImportMetaEnv 即可。唯一有点麻烦的是：它不是自动的，而是要求开发者手动添加环境变量。– 这就是为什么会创建这个插件的原因，它能扫描环境变量配置并自动生成接口 ImportMetaEnv（如果没有），或者在现有的接口中添加缺失的环境变量字段。

设计

使用

pnpm i -D @liuli-util/vite-plugin-env-dts-gen

配置插件

//vite.config.ts
import { defineConfig } from 'vite'
import { envDtsGen } from '@liuli-util/vite-plugin-env-dts-gen'

export default defineConfig({
  plugins: [envDtsGen()],
})

示例项目

FAQ

默认插件有以下行为

• 当 src/vite-env.d.ts 中的 ImportMetaEnv 接口已经包含字段时，不会重复添加或替换，而是跳过，这个行为主要是为了让用户可以自定义环境变量
• 永远不会自动清除环境变量，即便它已经在 .env* 中不存在了，理由同上
• 构建时强制生成一次环境变量，即便没有任何变化，这个行为是为了避免第一次拉取代码之后立刻构建的情况

问题

• 插件的默认行为是否合理？例如永远不会自动清除没有使用的环境变量类型定义。
• 是否应该支持 esm only？
• 是否应该使用 worker_thread 开启额外的线程运行，例如 vite-plugin-checker