使用 vite 构建 lib 时如何设置多个输出

Question

当我尝试在 vue3 中构建库时，我想设置多个输出文件。代码如下：

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

然后我会得到一个错误：

您必须为单文件构建设置“output.file”，或者在生成多个块时设置“output.dir””

那么，我该怎么做才能使这项工作成功呢？

投票：2.3.7

Answer 1

您缺少input.rollupOptions

以下完整的 vite 配置示例将生成一个index.bundle.[moduleFormat].js
（您可能需要根据您的设置调整文件路径）*：

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

为了更好地理解这个答案，请阅读以下句子：

如果您提供入口点数组或将名称映射到入口点的对象，它们将被捆绑到单独的输出块中。

除非output.file使用该选项，否则生成的块名称将遵循该output.entryFileNames选项。当使用对象形式时，[name]文件名的部分将是文件名的名称object property，而对于数组形式，它将是入口点的文件名。

请注意，使用对象形式时可以通过在/名称中添加 a 将入口点放入不同的子文件夹中。

如果我们遵循文档，我们可以获得更高的精度，并且我们知道：

output.dir
Type: string
Set in build.rollupOptions

用于：所有生成的 chunk 放置的目录，如果生成多个 chunk，则需要此选项。否则，可以使用文件选项来代替。

output.file
Type: string

要写入的文件。仅当生成的块不超过 1 个时才可使用。

Answer 2

我猜您正在寻找图书馆模式

并且，请参阅配置 Vite 页面以根据您的需求进行调整。