How do you configure Vite Library Mode for ESM and UMD outputs?

WHAT THIS TESTS: This question probes whether you can configure Vite Library Mode to produce multiple distribution formats from a single build pipeline. The interviewer wants to see that you understand the difference between ESM for modern bundlers and UMD for direct browser script tag consumption, and that you know how to externalize peer dependencies like Vue while mapping them to browser globals.

A GOOD ANSWER COVERS: First, the build.lib configuration object with entry set to the library index file, name set for the UMD global, and formats set to an array containing both es and umd. Second, a fileName function that returns distinct paths per format so the ESM and UMD outputs do not overwrite each other. Third, build.rollupOptions.external listing vue so the framework is excluded from the bundle. Fourth, build.rollupOptions.output.globals mapping vue to Vue so the UMD build knows which window global to reference. Fifth, awareness that Vite Library Mode inlines assets and ignores the assetsDir and assetsInlineLimit settings according to the Vite documentation.

COMMON WRONG ANSWERS: Suggesting two separate vite.config.js files or distinct build scripts instead of leveraging the native formats array. Omitting the name field under build.lib, which is required for UMD output and produces an unnamed global. Forgetting to externalize Vue, which bloats the library with framework code and breaks consumers who already load Vue. Neglecting the globals mapping, causing the UMD bundle to reference vue as a module instead of window.Vue.

LIKELY FOLLOW-UPS: How would you handle styles or CSS extraction given that Library Mode inlines assets? What package.json exports map would you write so bundlers use the ESM file while browsers via CDN use the UMD file? How do you emit TypeScript declaration files alongside the build? What would change if you added a CJS format for older Node tooling?

ONE CONCRETE EXAMPLE: Imagine a Vue component library exporting Button and Input components. The vite.config.js sets build.lib.entry to src/index.ts, build.lib.name to AcmeVueLib, and build.lib.formats to es and umd. The fileName function returns distinct names such as acme-vue-lib.es.js and acme-vue-lib.umd.js. Under build.rollupOptions, external is vue and output.globals maps vue to Vue. The build produces dist files for Vite or Webpack consumers and for plain HTML script tags, both leaving Vue as an external dependency.