Babel [karma-babel-preprocessor]カルマテスト用のES6-> ES5を変換しない

Question

テスト用にmochaとchaiを使用しているカルマをインストールしました。私たちは、カルマ - バベル - プリプロセッサを使用して、カルベルにまっすぐにバベルを組み込み、ES6ファイルをES5に変換して実行させようとしています。 mochaを使用すると、個別にbabel（モカテストコマンド）が動作しますが、カルマを使用しようとしますが、動作しません。

karma.conf.jsはスニペット：

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スニペット：

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

私たちは、次のエラーを取得：我々はされてJSファイルを評価するとき

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 

をそれらはES5に変換されていないので、構文 'export'はまだ存在します。

私たちは変換に他のフレームワークを使用したくありません。ウェブパック、ブラウザなど

ありがとう！

Answer 1

私はまだプリセットだけでなく、バ​​ベルが必要だと思います。

npm i babel --save-dev

私はその場でさせるカルマ前工程私のファイルを意味し、私のプロジェクトの一つで、ほぼ同様の構成を有している、と私のための唯一の違いは、私もbabeljsがインストールされていることです。

これが役に立ちます。

乾杯

Answer 2

私は同じ問題で、過去数時間のために苦労してきました。あなたのユースケースが私のものと同じかどうかはわかりませんが、私はそれを最終的に理解しました。前

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

karma.conf.jsファイル：

コード、テストsrc/foo.js下：

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

テストコードtests/foo.spec.js

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

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

これは、あなたが見たReferenceError: Can't find variable: exportsエラーを生じました。

修正：

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

• karma.conf.js

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

に以下を追加します。そして、エラーが去っていきました。

また、次のexport宣言（which I believe should be correct）は機能しません。

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

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

Answer 3

問題がないために、あなたはまだCommonJSにバベルのtranspileのes2015モジュールので、（ブラウザでCommonJSモジュールを実行することができるようにあなたのファイルをラップ/バンドルしていないとCJSは、ノードのデフォルトのモジュールシステムであるということですカルマがテストを実行しているブラウザ）。だからあなたのオプションは次のとおりです。

• 使用karma-commonjs wrapper（すべてのあなたの依存関係てmanualyを追加したい場合）
• 使用babelifyプラグイン
• 使用webpackバンドラ明らか