Play around with new Vite environment APIs

[aklinker1]

Feature Request

Would like to contribute feedback to the new API around how it can be used in web extensions. That means playing around with how the build setup can be simplified.

[aklinker1]

Here's the basic setup for a single vite build to output a full extension:

// vite.config.ts
import { defineConfig } from "vite";
import { rm } from "node:fs/promises";

export default defineConfig({
  build: {
    // Disable clearing otherwise it gets clear for each environment
    emptyOutDir: false,
  },

  builder: {
    buildApp: async (builder) => {
      const environments = Object.values(builder.environments).filter(
        // Don't build vite's default environment
        (env) => env.name !== "client",
      );

      // Clear the output directory before building
      await rm(builder.config.build.outDir, { recursive: true, force: true });

      // In series
      for (const environment of environments) {
        await builder.build(environment);
      }

      // Or in parallel
      // await Promise.all(environments.map((env) => builder.build(env)));
    },
  },

  environments: {
    esm: {
      consumer: "client",
      build: {
        rolldownOptions: {
          input: ["src/popup.html", "src/background.ts"],
          output: {
            entryFileNames: "[name].js",
          },
        },
      },
    },
    content_scripts: {
      consumer: "client",
      build: {
        lib: {
          entry: "src/content.ts",
          fileName: (_, name) => name + ".js",
          formats: ["iife"],
          name: "_____",
        },
      },
    },
  },
});

It can be built via:

vite build

I have not tested dev mode yet because there is a lot more required than just configuring build inputs. I'll have to test dev mode out in WXT itself.

I'm not sure if this is much faster than doing multiple builds, or if it reuses the build cache, like transformed dependencies, between environment builds.

But environments translate pretty well to WXT's existing entrypoint groups - each group needs it's own vite environment.