Babel [preprocessore karma-babel] Non conversione ES6-> ES5 per test karma

Question

Abbiamo installato karma, che utilizza moka e chai per i test. Stiamo cercando di integrare Babele direttamente nel karma usando il preprocessore karma-babel, per eseguire la conversione dei nostri file ES6 in ES5. Usando moka individualmente funziona con babel, cioè un comando di test moka, ma proviamo a usare il karma invece non funziona.

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' 
], 

frammenti package.json:

"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" 
} 

Otteniamo il seguente errore:

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 

Quando valutiamo i file JS essere caricato, non sono stati convertiti in ES5, quindi la sintassi 'export' è ancora presente.

Non vogliamo utilizzare altri framework per la conversione, ad es. webpack, browserify, ecc.

Grazie!

Answer 1

Penso che tu abbia ancora bisogno di babele, non solo il preset.

npm i babel --save-dev

ho quasi la stessa configurazione su uno dei miei progetti, il che significa lasciare che il karma pre-processo il mio file al volo, e l'unica differenza per me è che ho installato babeljs anche.

Spero che questo aiuti.

Acclamazioni

Answer 2

ho lottato per le ultime ore con lo stesso problema. Non sono sicuro che il tuo caso d'uso sia uguale al mio, ma alla fine l'ho capito.

Codice in prova src/foo.js:

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

Codice di prova 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 file prima:

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

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

Questo ha prodotto l'errore ReferenceError: Can't find variable: exports che avete visto.

La correzione:

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

• aggiungete quanto segue al karma.conf.js

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

Quindi l'errore è andato via.

Inoltre, si noti che le seguenti dichiarazioni export (which I believe should be correct) non funzionano.

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

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

Answer 3

Il problema è che ancora non hai fatto del pacco/avvolgono i file per essere in grado di eseguire i moduli CommonJS nel browser (perché Babel moduli transpile es2015 in CommonJS e CJS è il sistema predefinito dei moduli per il nodo, non per browser in cui Karma esegue i test). Quindi, le opzioni sono:

• Usa karma-commonjs wrapper (se si desidera aggiungere tutte le dipendenze manualy)
• Usa browserify Bundler con babelify plug
• Usa webpack bundler