Build-time scripts -- what plugin to run them and what environment do they run in?

[stuvjordan-uroc]

Hi Everyone:

I'm building a static site with Vite. The site relies on some assets that are computationally intensive to generate. I'd like to put the code I'm using to generate the assets in my Vite project, and have the code execute at build time. (This will help me keep all the code I need for the project in one place.)

I'm brand new to Vite, rollup, and bundlers more generally, so I'm struggling to understand the basic concepts in how to make this work. From what I've been able to glean, it seems as though rollup-plugin-command is what I'd need to use to cause my asset-generation code to be executed on build.

My first question: Is that right? is rollup-plugin-command the plugin I need to execute a script at build time?

Second question: If I have some code in my Vite project that will be executed during the build, what environment will that code run in? Since that code won't ever be run on the client that ultimately consumes my app, I'm inclined to assume that it will run in Node. So (for instance), to load a local file, the code would need to use the 'node:fs' module. But everything in the Vite docs suggests to me (although I don't see where they say this explicitly) that all code in any Vite project, including code run exclusively during the build, runs in Vite's browser-ish environment. (So to load a file, my code would use import.meta.url to get the url of the file and then load the file using fetch).

I hope y'all don't mind entertaining these very basic questions. If there's a conceptual introduction to how Vite works that would help clear up my very basic confusion (the Vite docs are a bit over my head), please feel free to point me to it!

Thank you!!!

[SametDulger]

Hi @stuvjordan-uroc,

Your questions are quite common for people starting with Vite and bundlers, so no worries — happy to clarify.

1. Is rollup-plugin-command the right plugin to run scripts at build time?
   You can use rollup-plugin-command to run commands during the Rollup build, and since Vite uses Rollup under the hood for production builds, it works—but it’s not the only or necessarily the best way.

A simpler and more direct approach is to write a custom Vite plugin that runs your code during build hooks such as buildStart. This lets you execute arbitrary Node.js code directly, without depending on extra plugins.

Example of a simple custom Vite plugin to generate assets at build time:

// vite.config.js
import { writeFileSync } from 'node:fs';

export default {
  plugins: [
    {
      name: 'generate-assets',
      buildStart() {
        // This code runs once at the start of the build
        const content = 'Generated content';
        writeFileSync('public/generated.txt', content);
      }
    }
  ]
};

2. What environment does the build-time code run in?
   Any code you execute as part of the build (in your config file, or inside build hooks in plugins) runs in Node.js, not in a browser-like environment.

This means you have access to the full Node API (e.g., fs, path, child_process), and can do things like reading/writing files synchronously or asynchronously.

The confusion arises because your application code (the code shipped to the browser) runs in a browser environment where you don’t have access to Node APIs, so you need to use import.meta.url or fetch to load assets.

But the build-time code is completely separate — it’s run once on your machine/server when you run vite build or similar commands.

Additional resources for learning Vite concepts

• The Vite Guide is a good start; focus on the “Plugins” and “Build” sections to understand the build lifecycle.

• Rollup’s plugin hooks documentation helps since Vite plugins follow a similar interface.

• A nice article introducing Vite’s plugin system might also help.

[stuvjordan-uroc]

Thank you!!!