How to set multiple output when build lib with vite

Question

When I try to build a lib in vue3, I want to set multiple output file. Code like this:

rollupOptions {
  output: [
    {
      file: 'bundle.js',
      format: 'cjs'
    },
    {
      file: 'bundle.min.js',
      format: 'iife',
      name: 'version',
    }
  ]
}

Then I will get an error:

You must set either "output.file" for a single-file build or "output.dir" when generating multiple chunks"

So, how should I do can make this work?

vite: 2.3.7

Answer 1

👉 You are missing the input config in rollupOptions.

The following full vite config example will generate a index.bundle.[moduleFormat].js
(you may need to adjust file path according to your setup)* :

import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default (opts: { mode: "production" | "development"; command: "build" | "serve" }) => {
    return defineConfig({
        build: {
            target: "es2020",
            commonjsOptions: {
                sourceMap: false
            },
            rollupOptions: {
                input: {
                    index: "./src/index.js"
                },
                /* single
                output: {
                    format: "umd",
                    strict: false,
                    chunkFileNames: `[name].[hash].js`,
                    entryFileNames: "[name].bundle.umd.js",
                    dir: "dist"
                },
                */
                // array config example
                // from rollup: export type InternalModuleFormat = 'amd' | 'cjs' | 'es' | 'iife' | 'system' | 'umd';
                output: [
                    {
                        format: 'cjs',
                        entryFileNames: "[name].bundle.[format].js",
                    },
                    {
                        format: 'es',
                        entryFileNames: "[name].bundle.[format].js",
                    },
                    {
                        format: 'umd',
                        entryFileNames: "[name].bundle.[format].js",
                    },
                ]
            }
        }
    });
};

💡 To understand this answer better, please read the following sentence :

If you provide an array of entry points or an object mapping names to entry points, they will be bundled to separate output chunks.

And unless the output.file option is used, generated chunk names will follow the output.entryFileNames option. When using the object form, the [name] portion of the file name will be the name of the object property while for the array form, it will be the file name of the entry point.

Note that it is possible when using the object form to put entry points into different sub-folders by adding a / to the name.

If we follow the doc we can get more precisions and we know that :

output.dir
Type: string
Set in build.rollupOptions

Is for: The directory in which all generated chunks are placed and this option is required if more than one chunk is generated. Otherwise, the file option can be used instead.

output.file
Type: string

The file to write to. Can only be used if not more than one chunk is generated.