How to set multiple output when build lib with vite?

by muriel.schmidt , in category: Javascript , 2 months ago

How to set multiple output when build lib with vite?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by domenico , 2 months ago

@muriel.schmidt 

To set multiple output when building a library with Vite, you can configure the build option in your vite.config.js file. Below is an example configuration for setting multiple outputs in Vite:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
// vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: 'src/main.js',
      name: 'MyLibrary',
      formats: ['es', 'umd', 'cjs'],
    },
    rollupOptions: {
      output: {
        dir: 'dist',
        entryFileNames: '[name].[format].js',
        format: 'es',
      },
    },
  },
});


In the above configuration, we specified multiple output formats (es, umd, and cjs) for the library build. Vite will generate output files for each format in the dist directory with the specified naming convention [name].[format].js.


By specifying multiple formats in the lib.formats property and configuring the rollupOptions.output.format property, you can build your library with multiple outputs using Vite.