This vite plugin help you to evaluate export values of esm module at build time, also allow you to import the values at runtime
use use build
directive to declare a build time file, in following code snippet, fetchMessage
and zod schema validation is done at build time
// env.ts
"use build"
import { z } from "zod"
import { envSchema } from "./env-schema"
async function fetchMessage() {
console.log("should only run on build time")
const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
await delay(1000)
return "Hello world"
}
export const env = envSchema.parse(import.meta.env)
export const message = z.string().parse(await fetchMessage())
export default 123
and you can use all export values by directly importing the build time file at runtime
import { useState } from "react"
import { container } from "./index.css"
import { message } from "./env"
export function Main() {
const [count, setCount] = useState(0)
return (
<div className={container}>
<button onClick={() => setCount(count => count + 1)}>count: {count}</button>
<p>{message}</p>
</div>
)
}
npm install -D use-build
// vite.config.ts
import { defineConfig } from "vite"
import { UseBuildPlugin } from "use-build/vite"
import react from "@vitejs/plugin-react"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), UseBuildPlugin()]
})
All export values from build time file must be serializable.
-
HMR
-
Tests
-
add support for
.build.{ts,tsx,js,jsx}
files -
allow other plugins to run at vite runtime
GitHub - egoist/vite-plugin-compile-time: Some compile-time magic for your Vite project
MIT.