question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

support es6 inside the config file

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 8 years ago
  • Reactions:8
  • Comments:16 (9 by maintainers)

github_iconTop GitHub Comments

14reactions
levithomasoncommented, Dec 21, 2015

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.

4reactions
madnightcommented, Dec 19, 2016
"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

Read more comments on GitHub >

github_iconTop Results From Across the Web

How can I use ES6 in webpack.config.js? - Stack Overflow
Try naming your config as webpack.config.babel.js . You should have babel-register included in the project. Example at react-router-bootstrap.
Read more >
How to setup your ES6 environment quickly - freeCodeCamp
Step six: Compile ES6 to ES5 ... To execute the configuration file we've created, run this command $ rollup -c or $ rollup...
Read more >
Supporting ES6 import on IISNode on Windows App Service ...
This article is intended to guide you in supporting ES6 Modules ... the web.config file and if we use ES Modules in our...
Read more >
jsconfig.json Reference - Visual Studio Code
Visual Studio Code's JavaScript support can run in two different modes: ... The JavaScript experience is improved when you have a jsconfig.json file...
Read more >
How to transpile ES modules with webpack and Node.js
Learn how webpack interacts with and supports ES modules in this deep dive tutorial on ... See a sample webpack.config.js file below.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found