Karma: support es6 inside the config file

[rolandjitsu]

Since the latest releases of node support most ES6 features, I think there should be a way for users to use ES6 inside the karma.conf.js file. Gulp, for instance, allows it through the use of Babel.

[dignifiedquire]

If you are running node 4 you can easily use all available features in your karma.conf

[rolandjitsu]

@Dignifiedquire I actually tried and it seems to work. I had an error before and I thought it was because it could not read the format, but it turns out it was something else.

[skyrpex]

@Dignifiedquire that's true, but you can't assume that everybody has node 4...

[levithomason]

Gulp and webpack allow this by appending *.babel.js to their config files. They simply require('babel-core/register') for you before requiring their own config file.

I agree Karma should support this pattern. Node 4/5 are great, but do not support nearly as many future features as babel, such as import foo from 'foo'. Moreover, CommonJS modules are not fully compatible with ES6 modules. The export default statement in an ES6 module can be imported directly in another ES6 module. However, a CommonJS require(<some es6 module>) has to add .default to get the default export.

Since the Karma file is written in CommonJS (not future ES) the modules it require()s are beefed. You have to add CommonJS interop to use them, or add module.exports statements to your ES6 modules. Either case is a bit dirty and has consequences.

The ultimate fix IMHO is to support the babel register hook in the same fashion as gulp and webpack. In case that doesn't make it in and others want to do this, you can do it yourself very easily:

karma.conf.js

require('babel-core/register');
module.exports = require('./karma.conf.babel').default;

karma.conf.babel.js

import AnES6Module from 'anywhere'

export default (config) => {
  config.set({...

Now, karma start karma.conf.js and it will require the babel hook, then require your es6 config file compiling with babel first. All your stuff will work.

EDIT
For those interested, babel-plugin-add-module-exports is of help in this ^ venture. It adds the module exports for you.

[dignifiedquire]

I really like babel and transpiliation, but I don't want to impose the download of babel as an additional dependency onto everyone. So I'm okay with a PR that adds this optionally and tries to require babel, and if that fails logs a message telling users to install babel themselves.

[levithomason]

Cool, would love to contribute to this project. I'm overbooked atm but will add this to my bucket list.

[begincalendar]

This could be worked around temporarily using babel-node/babel-cli or the babel-register pre-hook (as is possible with the webpack config), but the problem is this.

Webpack works around it like so (refer to the isES6DefaultExportedFunc variable).

Can we at least change the config handler to handle the babel workaround in the mean time?

[levithomason]

I think a more robust solution would be to use Liftoff, which is what gulp uses, to handle CLI bootstrapping:

https://www.npmjs.com/package/liftoff

[dignifiedquire]

@levithomason I actually tried to use rechoir, the underlying module for liftoff but got blocked by issues on their side: https://github.com/karma-runner/karma/pull/2186

[madnight]

"scripts": {
  "babel": "./node_modules/.bin/babel-node --presets es2015",
  "test": "NODE_ENV=test npm run babel -- ./node_modules/karma/bin/karma start karma.conf.babel.js"
}

^ this trick also works for me in case you only want one karma.conf file, instead of the two suggested by @levithomason solution

[skyrpex]

@madnight you can skip the path to node_modules, like this:

"scripts": {
  "babel": "babel-node --presets es2015",
  "test": "NODE_ENV=test npm run babel -- karma start karma.conf.babel.js"
}

Not sure if the karma path can be skipped. If not, moving it to another script would do the trick.

[madnight]

@skyrpex yes i tried that, but removing the karma path does not work, however removing the path from babel does, now its even more concise and we all love conciseness :smiley:

[skyrpex]

@madnight what about this?

"scripts": {
  "babel": "babel-node --presets es2015",
  "karma": "karma start karma.conf.babel.js",
  "test": "NODE_ENV=test npm run babel -- npm run karma"
}

[madnight]

this also came to my mind, but does not work either, if it would be a bash shell, then i would know how to compose it correctly, but i dont know exactly how this npm script executioning work

[jadekler]

Is this still being considered? @skyrpex

[skyrpex]

I'm not sure what do you mean, @jadekler. My participation here consisted only in a few comments and opinions 👍