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

【问题标题】：How to set multiple output when build lib with vite使用vite构建lib时如何设置多个输出
【发布时间】：2021-08-25 08:36:30
【问题描述】：

当我尝试在 vue3 中构建一个库时，我想设置多个输出文件。像这样的代码：

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

然后我会得到一个错误：“您必须为单文件构建设置“output.file”或在生成多个块时设置“output.dir””

那么，我应该怎么做才能使这项工作？

vite：2.3.7

【问题讨论】：

标签： vuejs3 rollup lib vite

【解决方案1】：

? 您在rollupOptions 中缺少input 配置。

以下配置将在myoutput 目录中生成my-app.js （您可能需要根据您的设置调整文件路径）：

    rollupOptions: {
      input: {
        app: 'bundle.js',
      },
      output: {
        entryFileNames: 'my-[name].js',
        dir: './myoutput'
      }
    }

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

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

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

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

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

output.dir
Type: string
Set in build.rollupOptions

Is for：所有生成的块所在的目录，如果生成了多个块，则此选项是必需的。否则，可以使用 file 选项。

output.file
Type: string

要写入的文件。 只能在生成的块不超过一个时使用。

【讨论】：

【解决方案2】：

我猜你在找https://vitejs.dev/guide/build.html#library-mode

请参阅https://vitejs.dev/config/#build-lib 来调整您的需求。

【讨论】：