在Gulp.js中使用Rollup配置多输出文件的问题求助

错误原因梳理 #

• 首次报错是因为bundle.write()仅支持单个入参，多输出配置需要放在同一个数组中传入，而非拆分多个独立对象作为参数传入
• 二次报错是因为@rollup/stream不支持直接传入output数组，会将数组的索引值识别为非法配置字段

实现方案 #

方案1：Rollup原生API实现（推荐） #

直接使用Rollup官方Node API配合Gulp异步任务，无需额外stream适配工具，天然支持多输出配置，写法更简洁稳定：

const gulp = require('gulp');
const rollup = require('rollup');

gulp.task('js', async function () {
  // 初始化bundle实例
  const bundle = await rollup.rollup({
    input: './app.js',
    // 通用配置（plugins、external等）写在此处
    plugins: []
  });

  // 传入output数组生成多份输出
  await bundle.write([
    {
      file: './dist/library.js',
      format: 'umd',
      name: 'library',
      sourcemap: true
    },
    {
      file: './dist/file2.js',
      format: 'umd'
    }
  ]);

  return Promise.resolve();
});

方案2：@rollup/stream兼容实现 #

如果原有构建链路依赖stream管道，可通过合并多份rollup流实现多输出，需要先安装依赖：
npm install merge-stream --save-dev

const gulp = require('gulp');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const rollup = require('@rollup/stream');
const merge = require('merge-stream');

gulp.task('js', function() {
  // 定义所有输出配置
  const outputConfigs = [
    {
      file: 'bundle.js',
      format: 'umd'
    },
    {
      file: 'test.js',
      format: 'umd'
    }
  ];

  // 为每个输出配置生成独立的构建流
  const buildStreams = outputConfigs.map(config => {
    return rollup({
      input: './app.js',
      output: config
    })
    .pipe(source(config.file))
    .pipe(buffer())
    .pipe(gulp.dest('./build/js'));
  });

  // 合并所有流等待全部构建完成
  return merge(buildStreams);
});

内容的提问来源于stack exchange，提问作者Alvaro