Rollup で IIFE に複数ファイルをまとめる方法

Rollup はデフォルトで 1 つのエントリーポイントからバンドルを生成する。しかし複数のファイルを 1 つの IIFE にまとめたい場合は、inlineDynamicImports を有効化するのが簡単な方法である。これにより、複数のエントリーファイルや動的インポートを 1 つにまとめて IIFE 形式で出力できる。

// rollup.config.js
export default {
  input: [
    'src/main.js',
    'src/util.js',
    'src/extra.js',
  ],
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyBundle',
    inlineDynamicImports: true,
  },
}

この設定では main.js など複数のファイルをまとめて 1 つの IIFE に変換し、グローバル変数 MyBundle に格納する。もし複数の IIFE をそれぞれのファイルに対して作りたい場合は、export default の代わりに設定を配列で返し、それぞれに input と output を与える。

// 複数の IIFE を個別に生成する例
export default [
  {
    input: 'src/main.js',
    output: {
      file: 'dist/main.js',
      format: 'iife',
      name: 'Main',
    }
  },
  {
    input: 'src/util.js',
    output: {
      file: 'dist/util.js',
      format: 'iife',
      name: 'Util',
    }
  }
]