MikeKovarik/gulp-better-rollup(新しいタブで開きます)
主要言語: JavaScript
📦 Better Gulp plugin for Rollup ES6 module bundler
- star 数
- 48
- watcher 数
- 3
- fork 数
- 16
- issue 数
- 11
- 最終更新
- 2021/01/06
主要言語: JavaScript
📦 Better Gulp plugin for Rollup ES6 module bundler
A Gulp plugin for Rollup ES6 Bundler. In comparison with gulp-rollup, this plugin integrates Rollup deeper into Gulps pipeline chain. It takes some of the Rollup API out of your hands, in exchange for giving you full power over the pipeline (to use any gulp plugins).
Rollup is designed to handle reading files, building a dependency tree, transforming content and then writing the transformed files. This doesn't play well with gulp, since gulp is also designed to handle files with gulp.src() and gulp.dest(). Gulp plugins, by design should just handle in-memory transformations. Not actual files.
To tackle this problem gulp-better-rollup passes the file paths loaded in gulp.src() to rollup, rather than the gulp buffer.
This comes with some caveats:
gulp.dest(), the output "file" argument passed to Rollup can at most be used to set the file name for a bundle. If you pass a full directory path, only the file name part will be used. In addition, if you pass a file path to gulp.dest(), the Rollup "file" argument will be ignored entirely.gulp-sourcemaps plugin doesn't (yet) support the .mjs extension, that you may want to use to support the ES module format in Node.js. It can inline the sourcemap into the bundle file (using sourcemaps.write()), and create an external sourcemap file with sourcemaps.write(PATH_TO_SOURCEMAP_FOLDER). It won't however insert the //# sourceMappingURL= linking comment at the end of your .mjs file, which effectively renders the sourcemaps useless.npm install gulp-better-rollup --save-dev
You also need to install your own rollup (version 1.x.x). gulp-better-rollup depends on your rollup as a peer-dependency.
npm install rollup@^1 --save-dev
var gulp = require('gulp') var rename = require('gulp-rename') var sourcemaps = require('gulp-sourcemaps') var rollup = require('gulp-better-rollup') var babel = require('rollup-plugin-babel') gulp.task('lib-build', () => { gulp.src('lib/index.js') .pipe(sourcemaps.init()) .pipe(rollup({ // There is no `input` option as rollup integrates into the gulp pipeline plugins: [babel()] }, { // Rollups `sourcemap` option is unsupported. Use `gulp-sourcemaps` plugin instead format: 'cjs', })) // inlining the sourcemap into the exported .js file .pipe(sourcemaps.write()) .pipe(gulp.dest('dist')) })
Or simply:
gulp.task('lib-build', () => { gulp.src('lib/mylibrary.js') .pipe(sourcemaps.init()) // note that UMD and IIFE format requires `name` but it will be inferred from the source file name `mylibrary.js` .pipe(rollup({plugins: [babel()]}, 'umd')) // save sourcemap as separate file (in the same folder) .pipe(sourcemaps.write('')) .pipe(gulp.dest('dist')) })
This plugin is based on the standard Rollup options, with the following exceptions:
See rollup.rollup(inputOptions) in the Rollup API
input is unsupported, as the entry file is provided by gulp, which also works with gulp-watch.
gulp.src('src/app.js') .pipe(watch('src/*.js')) .pipe(rollup({...}, 'umd')) .pipe(gulp.dest('./dist'))
If you still need it for some reason, then you can specify a custom entry:
gulp.src('src/app.js') .pipe(someRealityBendingPlugin(...)) .pipe(rollup({ input: 'src/app.js' }, 'umd')) .pipe(gulp.dest('./dist'))
cache is enabled by default and taken care of by the plugin, because usage in conjunction with watchers like gulp-watch is expected. It can however be disabled by settings cache to false.
Options describing the output format of the bundle. See bundle.generate(outputOptions) in the Rollup API.
name and amd.id are inferred from the module file name by default, but can be explicitly specified to override this. For example, if your main file is named index.js or main.js, then your module would also be named index or main, which you may not want.
To use unnamed modules for amd, set amd.id to an empty string, ex: .pipe(rollup({amd:{id:''}})).
intro and outro are supported, but we encouraged you to use gulps standard plugins like gulp-header and gulp-footer.
sourcemap and sourcemapFile are unsupported. Use the standard gulp-sourcemaps plugin instead.
You can skip this first argument if you don't need to specify inputOptions.
outputOptions accepts a string with the module format, in case you only want to support a single format.
gulp.task('dev', function() { gulp.src('lib/mylib.js') .pipe(rollup('es')) .pipe(gulp.dest('dist')) })
inputOptions and outputOptions can also be specified as a shared object if you prefer simplicity over adherence to the Rollup JS API semantics.
gulp.task('dev', function() { gulp.src('lib/mylib.js') .pipe(rollup({ treeshake: false, plugins: [require('rollup-plugin-babel')], external: ['first-dep', 'OtherDependency'], }, { name: 'CustomModuleName', format: 'umd', })) .pipe(gulp.dest('dist')) })
Can be simplified into:
gulp.task('dev', function() { gulp.src('lib/mylib.js') .pipe(rollup({ treeshake: false, plugins: [require('rollup-plugin-babel')], external: ['first-dep', 'OtherDependency'], name: 'CustomModuleName', format: 'umd', })) .pipe(gulp.dest('dist')) })
outputOptions can be an array, in order to export to multiple formats.
var pkg = require('./package.json') gulp.task('build', function() { gulp.src('lib/mylib.js') .pipe(sourcemaps.init()) .pipe(rollup(inputOptions, [{ file: pkg['jsnext:main'], format: 'es', }, { file: pkg['main'], format: 'umd', }])) .pipe(sourcemaps.write('')) .pipe(gulp.dest('dist')) })
I no longer have time to dedicate myself to the project, nor do I use it in my current projects. I'd gladly accept new maintainers.