Karma + Webpack (babel-loader) + ES6 "Unerwartetes token importieren"

/edit: ich zog die config komplett auf ein minimum demonstriert das problem. Ich auch hochgeladen, ein funktionierendes Projekt auf GitHub, das können Sie Kasse, so dass Sie selbst sehen können.

Problematisch Anwendungsfall auf GitHub: webpack-angular15-es6-karma (download 7z-Archiv)

npm install
npm run build
npm run test

---

Ich weiß, es gibt ein paar Fragen, aber die Welt bewegt sich so schnell, und es gibt so viele Einflüsse /Abhängigkeiten, ich bin nicht in der Lage zu knacken dieses problem mit der aktuellen Lösungsvorschläge.

Ich habe ein webpack config, die kümmert sich um alle meine source-code und es funktioniert Super.

Zum testen, ich wiederverwenden, die config zu kümmern, eine einheitliche zentrale Eingabe-Skript, dass die Ladungen die Quellen und die test-Dateien. Ich konnte nicht einen anderen Weg finden, um import-Module aus meinem source-code in meinem test-code für den Test.

Karma baut feine Wiederverwendung mein webpack config, sondern der browser meldet einen Fehler, sobald es geöffnet ist.

Den source-code verwendet ES6 Importe und webpack erfordern Aussagen.

Paket.json:

npm führen Sie build >>> webpack --config webpack.config.js --Anzeige - - - Fehler-details --Farben --progress

npm test >>> karma start --single-run --no-auto-Uhr karma.config.js

{
  "name": "ProblemDemo",
  "scripts": {
    "build": "rimraf dist && webpack --config webpack.config.js --display-error-details --colors --progress",
    "test": "karma start --single-run --no-auto-watch karma.config.js"
  },
  "dependencies": {
    "angular": "^1.5.7",
    "angular-filter": "^0.5.8"
  },
  "devDependencies": {
      "webpack": "1.13.1",
      "html-loader": "0.4.3",
      "babel-loader": "5.3.2",
      "html-webpack-plugin": "1.6.1",
      "rimraf": "^2.5.3",
      "run-sequence": "1.1.2",
      "jasmine-core": "^2.4.1",
      "karma": "^0.13.19",
      "karma-chrome-launcher": "^0.2.2",
      "karma-coverage": "^0.5.3",
      "karma-jasmine": "^0.3.6",
      "karma-webpack": "^1.7.0",
      "loader-utils": "^0.2.12"
  }
}

karma.config.js:

module.exports = function (config) {
    config.set({
        browsers: ['Chrome'],
        coverageReporter: {
            reporters: [
                { type: 'html', subdir: 'html' },
                { type: 'lcovonly', subdir: '.' }
            ]
        },
        files: ['./tests.webpack.js'],
        frameworks: ['jasmine'],
        preprocessors: { './tests.webpack.js': ['webpack'] },
        reporters: ['progress', 'coverage'],
        webpack: configureWebpack()
    });

    function configureWebpack(webpackConfigFunction) {
        var webpackConfig = require('./webpack.config');
        webpackConfig.entry = undefined; //karma will pass the proper argument for entry
        return webpackConfig;
    }
};

Wie Sie sehen können ich bin nicht mit karma-babel-plugins: ich bin mir nicht sicher, warum ich brauche diese, da ich bereits eine funktionierende build für code mit import - /require-Anweisungen.

test_entry.js:

var testsContext = require.context('./test', true, /\.js$/);
testsContext.keys().forEach(testsContext);

var srcContext = require.context('./app', true, /\.js$/);
srcContext.keys().forEach(srcContext);

---

Dem webpack Aufbau gelingt ohne Probleme (und gibt test_entry.js Stück erwartende Dateigröße), aber dann Karma öffnet Chrome und sobald die Seite geladen ist, bin ich begrüßt mit dem folgenden Fehler:

Chrome 51.0.2704 (Windows 7 0.0.0) FEHLER

Uncaught SyntaxError: Unexpected token importieren

in the_path/test_entry.js:41

test_entry.js nicht hat 41 Zeilen und enthält keine import-Anweisungen und sowieso sollten Sie gekümmert haben. Was mache ich falsch?

In Fall, dass Sie wollen zu wissen die webpack config als auch:

JS:

//webpack.config.js, works perfectly for normal builds but not with Karma
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	debug: true,
	entry: {
		app: ['./app/index.js'],
		vendor: ['./app/vendor.js']
	},
	output: {
		path: path.join(__dirname, 'dist'),
		filename: 'js/[name].js'
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './app/index.html',
			inject: 'body',
			minify: false
		}),
		new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor.js'),
		new webpack.SourceMapDevToolPlugin({
			filename: '[file].map',
			exclude: /vendor/
		})
	],
	resolve: {
		extensions: ['', '.js'],
		alias: {
			app: path.join(__dirname, 'app')
		}
	},
	module: {
		loaders: [
			{
				test: /\.js$/,
				loader: 'babel-loader',
				include: path.join(__dirname, 'app'),
				exclude: path.join(__dirname, 'node_modules')
			},
			{
				test: /\.html$/,
				loader: 'html-loader'
			}
		]
	},
	resolveLoader: {
		root: path.join(__dirname, 'node_modules')
	},
};

In Fall, dass Sie wollen, um zu sehen, meine test erforderlich test_entry.js, das ich aber nicht zum laufen zu bekommen:

JS:

import jasmine from 'jasmine-core';
import readableNumberFilter from './file_path/readableNumber.filter';

//for some reason needed, or else unexpected token errors during build:
var describe = jasmine.describe;
var it = jasmine.it;
var expect = jasmine.expect;

describe('readableNumber Filter', function () {
	describe('readableNumber Filter formatting', () => {
		it('it should support optional arguments', function () {
			expect(readableNumberFilter("50.3")).toEqual("50,30");
		});
	});
});

---

Bearbeiten 20-7-2016

Das problem weiterhin besteht mit aktualisierten babel-loader Abhängigkeiten (einschließlich der Einstellung es2015 die option presets). "babel-core": "^6.11.4", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0",