How to set multiple output when build lib with vite?

by muriel.schmidt , in category: Javascript , a year ago

How to set multiple output when build lib with vite?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by domenico , a year 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.

Related Threads:

How to chain vite build and tests?
How to exclude a vue folder from being build in vite?
How to show build time with react.js using vite?
How to copy a static folder to both "dev" and "build" in vite?
How to build a react.js application with multiple html files?
How to build separated css files from sass files using vite?