Webpack + Karma + ES2015：Uncaught SyntaxError：意外的令牌导入

Question

我正在创建一个基于Webpack和angular的应用程序。我试图使用Mocha和Chai添加Karma进行单元测试。但是，当我尝试运行测试时，我收到以下错误：

Chrome 52.0.2743 (Linux 0.0.0) ERROR
    Uncaught SyntaxError: Unexpected token import
    at app/app.js:3

正如您在下面的webpack配置中所看到的，我使用了babel-loader。我已经用Google搜索了这个问题并在StackOverflow上进行了搜索，虽然有很多结果，但提出的解决方案都没有对我有用。

这是我的Webpack配置：

'use strict';

const webpack = require('webpack');
const path = require('path');
const autoprefixer = require('autoprefixer');

const APP = __dirname + '/app';
module.exports = {
  context: APP,
  entry: {
    app: ['webpack/hot/dev-server', './core/bootstrap.js',],
  },
  output: {
    path: APP,
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.html$/,
        loader: 'raw',
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'file?hash=sha512&digest=hex&name=img/[path][hash].[ext]',
          'image-webpack',
        ],
      },
      {
        test: /\.scss$/,
        loader: 'style!css!postcss!sass!sass-resources!scsslint',
      },
      {
        test: /\.js$/,
        loader: 'ng-annotate!babel?presets[]=es2015!eslint',
        exclude: /node_modules/,
      },
    ],
  },
  postcss() {
    return [autoprefixer,];
  },
  sassResources: path.resolve(__dirname, './app/components/**/*.scss'),
  imageWebpackLoader: {
    pngquant: {
      quality: "65-90",
      speed: 4,
    },
    svgo: {
      plugins: [
        {
          removeViewBox: false,
        },
        {
          removeEmptyAttrs: false,
        },
      ],
    },
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      minimize: true,
      output: {
        comments: false,
      },
      compressor: {
        warnings: false,
      },
    }),
  ],
};

我的Karma配置：

const webpackConfig = require('./webpack.config.js');
webpackConfig.entry = {};

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai',],
    files: [
      'app/**/*.js',
      'unit_testing/**/*.test.js',
    ],
    exclude: [
    ],
    preprocessors: {
      'spec.bundle.js': ['webpack',],
    },
    webpack: webpackConfig,
    reporters: ['progress',],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['Chrome',],
    singleRun: true,
    concurrency: Infinity,
  });
};

有问题的app.js：

// Controllers
import homeCtrl from './components/home/homeCtrl.js';

// Services
import Person from './components/services/person.service.js';

(function() {
  'use strict';
  const app = angular.module('app', ['ui.router',]);

  app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider.state('home', {
      url: '/',
      template: require('./components/home/home.html'),
      controller: 'homeCtrl',
    });
  },]);

  app.controller('homeCtrl', homeCtrl);

  app.service('Person', Person);

  module.exports = app;
}());

我的package.json

{
  "name": "odsc-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "e2e": "./node_modules/.bin/protractor",
    "e2e:local": "npm run e2e e2e.local.config.js",
    "e2e:check": "npm run e2e e2e.check.config.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node_modules/.bin/webpack",
    "dev": "webpack-dev-server --devtool eval --config webpack.config.js --progress --colors --hot --content-base app/ --host 0.0.0.0",
    "eslint": "eslint ./app",
    "scss-lint": "scss-lint",
    "lint": "npm run eslint && npm run scss-lint",
    "webdriver-manager": "./node_modules/.bin/webdriver-manager",
    "webdriver-update": "npm run webdriver-manager update"
  },
  "pre-commit": [
    "lint"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "angular": "^1.5.8",
    "angular-mocks": "^1.5.8",
    "angular-ui-router": "^0.3.1",
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-stage-0": "^6.5.0",
    "chai": "^3.5.0",
    "chai-as-promised": "^5.3.0",
    "css-loader": "^0.24.0",
    "cucumber": "^1.2.2",
    "eslint": "^3.4.0",
    "eslint-loader": "^1.5.0",
    "image-webpack-loader": "^2.0.0",
    "karma": "^1.2.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-mocha": "^1.1.1",
    "karma-webpack": "^1.8.0",
    "mocha": "^3.0.2",
    "ng-annotate-loader": "^0.1.1",
    "node-sass": "^3.8.0",
    "postcss-loader": "^0.11.1",
    "pre-commit": "^1.1.3",
    "protractor": "^4.0.4",
    "protractor-cucumber-framework": "^0.6.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^4.0.0",
    "sass-resources-loader": "^1.1.0",
    "scsslint-loader": "^0.1.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.0"
  }
}

.babelrc

{
  "presets": ["es2015", "stage-0"]
}