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

本文最后更新于:2022年1月13日 晚上

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

设计

自动生成环境变量的类型定义.drawio.svg

使用

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