mattalxndr/karma-rollup-preprocessor-1

Karma preprocessor to bundle ES modules using Rollup.

Karma preprocessor to bundle ES modules using Rollup.

Features

• Rebundles your files when watched dependencies change
• Caches bundle output for improved performance
• Maintained with by @jlmakes

Installation

npm install karma-rollup-preprocessor

Configuration

All the options detailed in the Rollup Documentation can be passed to rollupPreprocessor.

Standard

Below is a well-founded recommendation using the Bublé ES2015 transpiler:

// karma.conf.js
module.exports = function(config) {
	config.set({
		files: [
			/**
			 * Make sure to disable Karma’s file watcher
			 * because the preprocessor will use its own.
			 */
			{ pattern: 'test/**/*.spec.js', watched: false },
		],

		preprocessors: {
			'test/**/*.spec.js': ['rollup'],
		},

		rollupPreprocessor: {
			/**
			 * This is just a normal Rollup config object,
			 * except that `input` is handled for you.
			 */
			plugins: [require('rollup-plugin-buble')()],
			output: {
				format: 'iife', // Helps prevent naming collisions.
				name: '<your_project>', // Required for 'iife' format.
				sourcemap: 'inline', // Sensible for testing.
			},
		},
	})
}

Configured Preprocessors

Below shows an example where configured preprocessors can be very helpful:

// karma.conf.js
module.exports = function(config) {
	config.set({
		files: [{ pattern: 'test/**/*.spec.js', watched: false }],

		preprocessors: {
			'test/buble/**/*.spec.js': ['rollup'],
			'test/babel/**/*.spec.js': ['rollupBabel'],
		},

		rollupPreprocessor: {
			plugins: [require('rollup-plugin-buble')()],
			output: {
				format: 'iife',
				name: '<your_project>',
				sourcemap: 'inline',
			},
		},

		customPreprocessors: {
			/**
			 * Clones the base preprocessor, but overwrites
			 * its options with those defined below...
			 */
			rollupBabel: {
				base: 'rollup',
				options: {
					// In this case, to use a different transpiler:
					plugins: [require('rollup-plugin-babel')()],
				},
			},
		},
	})
}

Happy bundling!