karma-babel-preprocessor

Preprocessor to compile ES6 on the fly with babel.

Installation

npm install karma-babel-preprocessor --save-dev

Configuration

See babel options for more details.

Given options properties are passed to babel.

In addition to the options property, you can configure any babel options with function properties. This is useful when you want to give different babel options from file to file.

For example, inline sourcemap configuration would look like the following.

module.exports = function(config) {
  config.set({
    preprocessors: {
      'src/**/*.js': ['babel'],
      'test/**/*.js': ['babel']
    },
    babelPreprocessor: {
      options: {
        sourceMap: 'inline'
      },
      filename: function(file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
      },
      sourceFileName: function(file) {
        return file.originalPath;
      }
    }
  });
};

Polyfill

If you need polyfill, make sure to include it in files.

module.exports = function(config) {
  config.set({
    files: [
      'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
      // ...
    ],
    // ...
  });
});

Karma's plugins option

In most cases, you don't need to explicitly specify plugins option. By default, Karma loads all sibling NPM modules which have a name starting with karma-*. If need to do so for some reason, make sure to include 'karma-babel-preprocessor' in it.

module.exports = function(config) {
  config.set({
    plugins: [
     'karma-jasmine',
     'karma-chrome-launcher',
     'karma-babel-preprocessor'
    ],
    // ...
  });
};