Babel [karma-babel-preprocesor] ​​Nie konwertowanie ES6-> ES5 dla testów karmy

Question

Zainstalowaliśmy karmę, która używa testów mocha i chai. Staramy się integrować babel prosto do karmy za pomocą preprocesora karma-babel, aby przekonwertować nasze pliki ES6 na ES5, które mają być uruchomione. Używanie mocha indywidualnie działa z babelem, tj. Poleceniem testu mokki, ale staramy się używać karmy zamiast tego, że nie działa.

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 fragmenty:

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

Otrzymujemy następujący błąd:

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 

Kiedy oceniać pliki JS bycia załadowane, nie zostały przekonwertowane do wersji ES5, dlatego też nadal istnieje składnia "export".

Nie chcemy używać żadnych innych frameworków do konwersji, np. webpack, browserify itp.

Dzięki!

Answer 1

Myślę, że nadal potrzebujesz babel, a nie tylko ustawienie.

npm i babel --save-dev

Mam prawie taką samą konfigurację na jednym z mojego projektu, co oznacza, pozwalając Karma wstępne przetworzenie mój plik na bieżąco, a jedyną różnicą jest dla mnie, że mam również zainstalowany babeljs.

Mam nadzieję, że to pomoże.

Cheers

Answer 2

mam zmaga się w ciągu ostatnich kilku godzin o tym samym numerze. Nie jestem pewien, czy twój przypadek użycia jest taki sam jak mój, ale w końcu to rozgryzłem.

Kod badanego src/foo.js:

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

kod testowy 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 plik przed:

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

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

Dało to błąd ReferenceError: Can't find variable: exports widziałeś.

Rozwiązaniem:

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

• Dodaj następujący aby karma.conf.js

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

Wtedy błąd odszedł.

Należy również pamiętać, że następujące deklaracje export (which I believe should be correct) nie działają.

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

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

Answer 3

Problemem jest to, że nadal nie bundle/owinąć swoje pliki, aby móc wykonać moduły CommonJS w przeglądarce (bo Babel moduły transpile es2015 język CommonJS i CJS to domyślny system modułowy dla węzła, a nie dla przeglądarki, w których Karma uruchamia swoje testy). Więc opcje są:

• Zastosowanie karma-commonjs wrapper (jeśli chcesz dodać wszystkie manualy zależności)
• Zastosowanie browserify Bundler z babelify wtyczki
• Korzystanie webpack Bundler