Webpack Karma + Typescript with ES6

Question

Webpack Karma + Typescript with ES6

7

我正在尝试为一个用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"
    ]
}

- sqwk

这个错误实际上发生在哪里？是哪个文件/哪一行？ - smnbbrv

任何文件；总是第一个使用ES6语言特性的文件。 - sqwk

什么是任何文件？src中的任何文件？node_modules中的任何文件？你能发布tsconfig.json吗？ - smnbbrv

编辑以添加 tsconfig.json。是的，任何在 src 中包含 import 或 let 等的文件都会被编译。 - sqwk

你正在使用哪个版本的 node 和 npm？ - debatanu

npm v3.10.10 和 node v6.9.4 - sqwk

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- debatanu · Accepted Answer

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