4

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

 2 years ago
source link: https://blog.rxliuli.com/p/ab597b1e0d9840caaf51a8d24bc2c38c/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

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

2022年1月12日 中午

644 字

6 分钟

本文最后更新于：2022年1月12日 下午

在开发前端 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()],
});

示例项目

默认插件有以下行为

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK