Vite용 Validate-env 플러그인

일부 환경 변수를 추가하는 것을 잊었기 때문에 CI를 여러 번 연속으로 다시 시작한 적이 있습니까?

아니면 정의되지 않은 환경 변수 중 하나라는 사실을 깨닫기 위해 문제를 디버깅하는 데 한 시간을 보냈습니까? 아니면 이 변수가 채워져 있지만 형식이 잘못되었을 수 있습니까?

이것이 vite-plugin-validate-env가 해결하려고 하는 문제입니다.

https://github.com/Julien-R44/vite-plugin-validate-env

소개

따라서 Vite용 이 플러그인을 사용하면 런타임 오버헤드 없이 빌드 시 환경 변수의 유효성을 검사할 수 있습니다.

🪛 완전히 형식이 안전합니다. 유형은 스키마 정의에서 유추됩니다.
✅ 여러 검증 라이브러리 지원( Zod 및 @poppinss/validator-lite )
👉 구문 분석, 유효성 검사, 변환
🎉 맞춤 규칙 및 오류 메시지

그리고 그것은 다음과 같이 간단합니다.

// vite.config.ts
import { defineConfig } from "vite";
import { ValidateEnv } from "@julr/vite-plugin-validate-env";

export default defineConfig({
  plugins: [
    ValidateEnv({
      VITE_MY_VAR: Schema.string()
    }),
  ],
})

이제 pnpm dev 로 개발 서버를 시작하거나 pnpm build 로 빌드를 시작하기 전에 플러그인이 환경 변수의 유효성을 검사합니다. 문제가 있는 경우 프로세스가 즉시 중지되고 경고가 표시됩니다.

See fail-fast

다음은 애플리케이션을 시작하거나 빌드하려고 할 때 터미널에서 직접 얻을 수 있는 출력입니다.

변수 변환

또한 API를 호출하는 데 사용하기 위해 변수VITE_AUTH_API_URL를 노출하려는 경우를 가정해 보겠습니다. 그러나 이 환경 변수 끝에 슬래시가 있어야 합니다. 방법은 다음과 같습니다.

import { defineConfig } from '@julr/vite-plugin-validate-env'
import { z } from 'zod'

export default defineConfig({
  validator: 'zod',
  schema: {
    VITE_AUTH_API_URL: z
      .string()
      .transform((value) => value.endsWith('/') ? value : `${value}/`),
  },
})

Note two things here:

• The schema is validated using Zod, which can be useful if you already use this library. But it would also be possible with the other validator.
• The schema is defined here in a dedicated file env.ts. Separating the schema from vite.config.ts is much cleaner.

그리고 그게 다야. 동료 중 한 명이 이 환경 변수 끝에 슬래시를 잊은 경우 자동으로 추가됩니다.

안전한 import.meta.env 입력

TypeScript를 수행하는 경우 여기 vite 설명서에 설명된 대로 변수를 수동으로 추가하여 import.meta.env 개체에 인텔리센스를 사용할 수 있음을 알 수 있습니다.

https://vitejs.dev/guide/env-and-mode.html#intellisense-for-typescript

vite-plugin-validate-env를 사용하면 일석이조로 두 마리의 새를 죽일 수 있습니다. 스키마를 정의하면 다음과 같이 import.meta.env 개체를 매우 쉽게 확장할 수 있습니다.

type ImportMetaEnvAugmented = import('@julr/vite-plugin-validate-env')
  .ImportMetaEnvAugmented<typeof import('../env').default>

interface ImportMetaEnv extends ImportMetaEnvAugmented {
  // Now import.meta.env is totally type-safe and based on your `env.ts` schema definition
}

예시 :




이 플러그인이 유용하기를 바라며 피드백이 있으면 알려주세요! 또한 프로젝트에 기여하고 싶다면 모든 PR에 열려 있습니다.

README의 다양한 기능에 대한 자세한 정보가 포함된 GitHub의 프로젝트를 찾을 수 있습니다. https://github.com/Julien-R44/vite-plugin-validate-env

💖을 보여주시고 마음에 드시면 프로젝트에 별표를 표시해 주시면 프로젝트에 대한 가시성을 높이는 데 많은 도움이 됩니다.