带有ES6的Webpack Karma + Typescript

时间:2017-01-28 15:34:39

标签: typescript webpack karma-runner

我正在尝试为使用typescript编写的库运行karma测试,但即使导入babel并为Uncaught SyntaxError: Unexpected token import配置了babel,仍然会获得es2015。 (不幸的是,业力只会从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"
    ]
}

1 个答案:

答案 0 :(得分:3)

希望你能在这里解决你的问题。 我认为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;