13

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

Paolo
  • 20,112
  • 21
  • 72
  • 113
wubian
  • 131
  • 1
  • 1
  • 3

2 Answers2

9

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",
                    },
                ]
            }
        }
    });
};

result illustration

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.

flydev
  • 4,327
  • 2
  • 31
  • 36
  • sorry I do not follow this answer. the OP asks for an output array, not an object, to create different types of outputs (es, umd, cjs). How's that answer solve that? I am getting the same error as OP – stilllife Sep 01 '22 at 08:26
  • @stilllife - you just have to define your config array `rollupOptions.output` and add the `rollupOptions.input` option as written in the answer, it's the key to not get an error (at least on `vite-2.3 to 2.8` when I wrote it). Check my edit. – flydev Sep 01 '22 at 23:19
2

I guess that you're looking for Library Mode

And, see the configuring Vite page to tweak to your needs.

Elijah Mock
  • 587
  • 8
  • 21
yooouuri
  • 2,578
  • 10
  • 32
  • 54