Webpack Karma + Typescript with ES6

Question

私はtypescriptで書かれたライブラリのカルマテストを実行しようとしていますが、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" 
    ] 
} 

Answer 1

ホープよあなたの問題をここで解決することができます。 webpack configには、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;