我可以使用带有 Gulp 的 Rollup 有多个入口点吗？

Question

我有一个 gulpfile.js，它使用 Rollup 构建两个不同的 JS 文件（前端和管理）。 rollup.config.js 方法允许指定多个入口点和包，但要使用 Gulp 实现此目的，我不得不采取一些麻烦的解决方法。

const javascripts = [
  {
    src: './app/assets/javascripts/main.js',
    dest: './public/javascripts/main.js',
    moduleName: 'main'
  },
  {
    src: './admin/assets/javascripts/admin.js',
    dest: './public/admin/javascripts/admin.js',
    moduleName: 'admin'
  }
]

gulp.task('js:compile', ()=> {
  javascripts.forEach((item)=> {
    return rollup({
      input: item.src,
      plugins: [
        builtins(),
        nodeResolve({ jsnext: true, browser: true }),
        commonjs({
          include: 'node_modules/**',
          exclude: 'node_modules/rollup-plugin-node-globals/**',
          ignoreGlobal: false,
          sourceMap: true,
          main: true,
          browser: true
        }),
        json(),
        buble()
      ]
    }).then(function (bundle) {
      return bundle.write({
        format: 'iife',
        name: item.moduleName,
        file: item.dest
      })
    })
  })
})

有没有更好的方法来实现这个目标？我不反对重新组织我的文件以使用 globbing 或类似的东西。

编辑：我已经将其更新为使用 Node 的 fs 而不是必须指定每个脚本，但这对我来说仍然感觉有点笨拙。

gulp.task('js:compile', () => {
  fs.readdir('./app/assets/javascripts', (err, files) => {
    if(err) throw err

    files.forEach((file) => {
      if(!file.match('.js')) return false

      return rollup({
        input: `./app/assets/javascripts/${file}`,
        plugins: [
          builtins(),
          nodeResolve({ jsnext: true, browser: true }),
          commonjs({
            include: 'node_modules/**',
            exclude: 'node_modules/rollup-plugin-node-globals/**',
            ignoreGlobal: false,
            sourceMap: true,
            main: true,
            browser: true
          }),
          json(),
          buble()
        ]
      }).then((bundle) => {
        return bundle.write({
          format: 'iife',
          name: file.split('.')[-2],
          file: `./public/javascripts/${file}`
        })
      }).catch( (e) => console.log(e) )
    })
  })
})

Answer 1

您现在可以使用 https://github.com/alfredosalzillo/rollup-plugin-multi-input，它还会在输出目录中保留目录树。

import multiInput from 'rollup-plugin-multi-input';

export default {
    input: ['src/**/*.js'],
    experimentalCodeSplitting: true,
    output: {
      format: 'esm',
      dir: 'dist'
    },
    plugins: [ multiInput() ],
};

Answer 2

现在，您可以 return 来自 rollup.config.js 的对象数组。

所以如果你

需要编译单个文件，return对象export default {...}
需要编译多个文件、return对象列表export default [{...},{...},{...}, ...]

在这里寻找灵感

cheatsheet

我可以使用带有 Gulp 的 Rollup 有多个入口点吗？

Can I have multiple entry points using Rollup with Gulp?

gulp

rollupjs