Webpack Karma + Typescript with ES6

Question

我试图对使用打字机编写的库进行业力测试，但即使导入了babel并将其配置为es2015，但仍继续获得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" 
    ] 
} 

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;