Babel [karma-babel-preprocessor] Konvertieren von ES6-> ES5 für Karma-Tests

Question

Wir haben Karma installiert, das Mocha und Chai für Tests verwendet. Wir versuchen, babel mit karma-babel-preprocessor direkt in Karma zu integrieren, um die Konvertierung unserer ES6-Dateien in ES5 durchzuführen. Die Verwendung von mocha arbeitet individuell mit babel, d. H. Einem Mokka-Test-Befehl, aber wir versuchen, Karma zu verwenden, stattdessen funktioniert es nicht.

karma.conf.js Snippet:

frameworks: ['mocha', 'chai'], 

// preprocess matching files before serving them to the browser 
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 
preprocessors: { 
    'src/**/*.js': ['babel'], 
    'test/**/*_spec.js': ['babel'] 
}, 

"babelPreprocessor": { 
    options: { 
     presets: ['es2015'], 
     sourceMap: 'inline' 
    }, 
    filename: function(file) { 
     return file.originalPath.replace(/\.js$/, '.es5.js'); 
    }, 
    sourceFileName: function(file) { 
     return file.originalPath; 
    } 
}, 

// list of files/patterns to load in the browser 
files: [ 
    'src/**/*.js', 
    'test/**/*_spec.js' 
], 

package.json Schnipsel:

"scripts": { 
    "test": "./node_modules/karma/bin/karma start karma.conf.js" 
}, 

"babel": { 
    "presets": ["es2015"] 
}, 

"devDependencies": { 
    "babel-preset-es2015": "^6.1.18", 
    "chai": "^3.4.1", 
    "karma": "^0.13.15", 
    "karma-babel-preprocessor": "^6.0.1", 
    "karma-chai": "^0.1.0", 
    "karma-mocha": "^0.2.1", 
    "karma-phantomjs-launcher": "^0.2.1", 
    "phantomjs": "^1.9.18", 
    "redux": "^3.0.4" 
} 

Wir erhalten die folgende Fehlermeldung:

PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR 
    ReferenceError: Can't find variable: exports 
    at Users/alexgurr/BT/FutureVoice/trunk/Portal/server/src/login.es5.js:3 

Wenn wir die JS-Dateien auswerten zu sein geladen, wurden sie nicht in ES5 konvertiert, daher ist die Syntax 'export' immer noch vorhanden.

Wir wollen keine anderen Frameworks für die Konvertierung verwenden, dh. webpack, browserifizieren etc.

Danke!

Answer 1

Ich denke, Sie brauchen immer noch babel, nicht nur das Preset.

npm i babel --save-dev

habe ich fast die gleiche Konfiguration auf einem meiner Projekt, was bedeutet, on the fly Karma vorverarbeiten meine Datei zu lassen, und der einzige Unterschied für mich ist, dass ich babeljs auch installiert haben.

Hoffe, das hilft.

Prost

Answer 2

Ich habe mit dem gleichen Problem in den letzten paar Stunden zu kämpfen. Ich bin mir nicht sicher, ob dein Anwendungsfall derselbe ist wie meiner, aber ich habe es schließlich herausgefunden.

im Test befindlichen Code src/foo.js:

var foo = "foo value"; 
export default foo; 

Prüfregeln tests/foo.spec.js:

import foo from "../src/foo.js"; 
describe('Foo', function() { 
    it('should be "foo value"', function() { 
     expect(foo).toBe('foo value'); 
    }); 
}); 

karma.conf.js Datei vor:

{ 
    // other configs 
    files: [ 
     'src/**/*.js', 
     'tests/**/*.spec.js', 
    ], 
    preprocessors: { 
     'src/**/*.js': ['babel'], 
     'tests/**/*.spec.js': ['babel'], 
    }, 

    babelPreprocessor: { 
     options: { 
      "presets": ["es2015"] 
     } 
    } 
} 

Dies ergab die ReferenceError: Can't find variable: exports Fehler Sie sahen.

Das Update:

• npm install --save-dev babel-plugin-transform-es2015-modules-umd

• In folgenden karma.conf.js

  babelPreprocessor: { 
      options: { 
       "presets": ["es2015"], 
       "plugins": ["transform-es2015-modules-umd"] 
      } 
  } 
  

Dann ging der Fehler weg.

Beachten Sie auch, dass die folgenden export Deklarationen (which I believe should be correct) nicht funktionieren.

// exports an object 
export default var foo = "something"; 

// exports undefined 
export var bar = "something else"; 

Answer 3

Das Problem ist, dass man immer noch nicht nicht bündeln/wickeln Sie Ihre Dateien in der Lage sein, Commonjs Module im Browser (weil Babel transpile es2015 Module in Commonjs und CJS ist Standard-Modulsystem für den Knoten ausführen, für Browser, in denen Karma seine Tests durchführt). So Ihre Optionen sind:

• Verwenden karma-commonjs wrapper
• Verwenden browserify Bündler mit babelify Plugin
• Verwenden webpack Bündler (wenn Sie alle Ihre Abhängigkeiten manualy hinzufügen möchten)