带有ES6的Webpack Karma + Typescript(Webpack Karma + Typescript with ES6)

 我正在尝试为使用es2015编写的库运行karma测试，但是即使导入并为es2015配置了babel，仍然会获得Uncaught SyntaxError: Unexpected token import 。 （不幸的是，业力只会从v2.5开始支持ES6） 
 
 我需要更改配置以使其工作？ 
 
 karma.conf.js： 
 
var webpackConfig = require('./webpack.config.test');

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: [
            {
                pattern: './config/karma.tests.js',
                watched: false
            }
        ],
        preprocessors: {
            './config/karma.tests.js': ['babel', 'webpack', 'sourcemap']
        },
        plugins: [
            'karma-webpack',
            'karma-jasmine',
            'karma-sourcemap-loader',
            'karma-chrome-launcher',
            'karma-phantomjs-launcher',
            'karma-babel-preprocessor'
        ],
        babelPreprocessor: {
            options: {
                presets: ['es2015']
            }
        },
        webpack: webpackConfig,
        webpackMiddleware: {
            stats: 'errors-only'
        },
        webpackServer: {
            noInfo: true
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ['PhantomJS'],
        singleRun: true
    });
};
 
 webpack.config.test.js 
 
var webpack                         = require('webpack');
var helpers                         = require('./helpers');

var config = {
    devtool: 'inline-source-map',
    resolve: {
        root: helpers.root('src'),
        extensions: [ '', '.js', '.ts' ]
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                include: helpers.root('src'),
                exclude: helpers.root('node_modules')
            }
        ]
    },
}

module.exports = config;
 
 tsconfig.json： 
 
{
    "compileOnSave": false,
    "compilerOptions": {
        "declaration": true,
        "declarationDir": "declarations",
        "module": "commonjs",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "outDir": "dist",
        "preserveConstEnums": true,
        "removeComments": false,
        "sourceMap": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,        
        "target": "es6",
        "typeRoots": [
            "node_modules/@types"
        ]
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

I am trying to run a karma test for a library written in typescript, but keep getting Uncaught SyntaxError: Unexpected token importeven though babel is imported and configured for es2015. (Unfortunately, karma will only support ES6 starting at v2.5)
 
What do I need change in the configuration to make things work?
 
karma.conf.js:
 
var webpackConfig = require('./webpack.config.test');

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: [
            {
                pattern: './config/karma.tests.js',
                watched: false
            }
        ],
        preprocessors: {
            './config/karma.tests.js': ['babel', 'webpack', 'sourcemap']
        },
        plugins: [
            'karma-webpack',
            'karma-jasmine',
            'karma-sourcemap-loader',
            'karma-chrome-launcher',
            'karma-phantomjs-launcher',
            'karma-babel-preprocessor'
        ],
        babelPreprocessor: {
            options: {
                presets: ['es2015']
            }
        },
        webpack: webpackConfig,
        webpackMiddleware: {
            stats: 'errors-only'
        },
        webpackServer: {
            noInfo: true
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ['PhantomJS'],
        singleRun: true
    });
};
 
webpack.config.test.js
 
var webpack                         = require('webpack');
var helpers                         = require('./helpers');

var config = {
    devtool: 'inline-source-map',
    resolve: {
        root: helpers.root('src'),
        extensions: [ '', '.js', '.ts' ]
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                include: helpers.root('src'),
                exclude: helpers.root('node_modules')
            }
        ]
    },
}

module.exports = config;
 
tsconfig.json:
 
{
    "compileOnSave": false,
    "compilerOptions": {
        "declaration": true,
        "declarationDir": "declarations",
        "module": "commonjs",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "outDir": "dist",
        "preserveConstEnums": true,
        "removeComments": false,
        "sourceMap": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,        
        "target": "es6",
        "typeRoots": [
            "node_modules/@types"
        ]
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

原文：https://stackoverflow.com/questions/41911553