Могу ли я иметь несколько точек входа, используя Rollup с Gulp?

У меня есть gulpfile.js который использует Rollup для создания двух отдельных файлов JS (front-end и admin). 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
      })
    })
  })
})

Есть ли лучший способ добиться этого? Я не против того, чтобы реорганизовать свои файлы, чтобы использовать глобирование или что-то подобное.

РЕДАКТИРОВАТЬ: я обновил его, чтобы использовать узлы 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) )
    })
  })
})

1 ответ

Теперь вы можете просто вернуть массив объектов из rollup.config.js.

Итак, если вы

  • нужно скомпилировать единый файл, вернуть объект export default {...}
  • необходимо скомпилировать несколько файлов, вернуть список объектовexport default [{...},{...},{...}, ...]

Ищите здесь вдохновение

Теперь вы можете использовать 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() ],
};

Вы можете использовать https://github.com/rollup/rollup-plugin-multi-entry, это позволяет многократную запись, как это

import multiEntry from "rollup-plugin-multi-entry";

export default {
  input: "test/**/*.js",
  plugins: [multiEntry()]
};

это также поддерживает exclude|include исключить определенный тип файлов

// The usual rollup entry configuration works.
export default {
  input: 'just/one/file.js',
  plugins: [multiEntry()]
  // ...
};

// As does a glob of files.
export default {
  input: 'a/glob/of/files/**/*.js',
  plugins: [multiEntry()]
  // ...
};

// Or an array of files and globs.
export default {
  input: ['an/array.js', 'of/files.js', 'or/globs/**/*.js'],
  plugins: [multiEntry()]
  // ...
};

// For maximum control, arrays of globs to include and exclude.
export default {
  input: {
    include: ['files.js', 'and/globs/**/*.js', 'to/include.js'],
    exclude: ['those/files.js', 'and/globs/*.to.be.excluded.js']
  },
  plugins: [multiEntry()]
  // ...
};
Другие вопросы по тегам