Webpack Karma + Typescript 与 ES6

Question

我正在尝试对用 typescript 编写的库运行 karma 测试，但即使 babel 已导入并配置为 es2015，也会不断收到 Uncaught SyntaxError: Unexpected token import。 （很遗憾，karma 从 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"
    ]
}

Answer 1

希望我能在这里解决您的问题。 我认为webpack 配置需要加载器来转换 ES6 文件，因此您的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')
            },
                test: /\.js$/,
                exclude: helpers.root('node_modules'),
                loader: 'babel-loader'
        ]
    },
}

module.exports = config;