使用 Rollup 和 Gulp 可以有多个入口点吗？

Posted 2023-02-19

【中文标题】使用 Rollup 和 Gulp 可以有多个入口点吗？

【英文标题】：Can I have multiple entry points using Rollup with Gulp?

【发布时间】：2018-07-27 22:35:40

【问题描述】：

我有一个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) )
    )
  )
)

【问题讨论】：

我真的不明白为什么你提出的第一个解决方案是讨厌的？显然，如果内置 rollup 的 gulp 解决方案会更好，但这是易于理解的干净代码

【参考方案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() ],
;

【讨论】：

这个已经不需要了，你可以返回export default [.., ...]的对象列表

这比较慢，并且使用多个配置与公开多个输入文件不同。此外，您需要为每个文件编写配置。

两者也可以相互补充，假设您有一个捆绑文件和多个工作文件，使用具有 2 个条目的配置数组，1 个用于捆绑，1 个用于将使用 multiInput 插件的所有工作人员。跨度>

【参考方案2】：

现在，您可以从rollup.config.js 返回一个对象数组。

如果你

需要编译单个文件，返回对象export default ... 需要

编译多个文件

，返回对象列表export default [...,...,..., ...]

在这里寻找灵感

cheatsheet