Webpack + Карма + Машинопись + Ng1: Uncaught SyntaxError: Неожиданный маркер импорт

Question

У меня есть следующие karma.conf ...

var webpackConfig = require('./webpack.common.js'); 
webpackConfig.entry = {}; 
webpackConfig.plugins = []; 
var globFlat = require('glob-flat'); 

var appFiles = globFlat.sync([ 
    './src/main/coffee/**/*Module.coffee', 
    './src/main/coffee/**/*.coffee' 

]); 
var styleFiles = globFlat.sync([ 
]); 
var dependencyFiles = [ 
    './src/main/typescripts/*.ts', 
]; 
var testFiles = globFlat.sync([ 
    './test/main/**/*.coffee', 
    './test/main/**/*.js' 
]); 

var files = dependencyFiles.concat(appFiles, styleFiles, testFiles); 
module.exports = function(config) { 
    config.set({ 
    basePath: '', 
    frameworks: ['mocha', 'requirejs', 'chai-spies', 'chai'], 
    files: files, 
    preprocessors: { 
     '../src/main/coffee/**/*.coffee': ['webpack'], 
     '../src/main/typescripts/**/*.ts': ['webpack'], 
     '../src/test/**/*.coffee': ['coffee'] 
    }, 

    webpack: webpackConfig, 
    reporters: ['progress'], 
    port: 9876, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: true, 
    browsers: ['Chrome'], 
    singleRun: false, 
    concurrency: Infinity 
    }) 
}; 

и следующий WebPack ...

var webpack = require("webpack"); 
var glob = require('glob-all'); 
const helpers = require('./helpers'); 
var path = require("path"); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var environment = process.env.NODE_ENV || 'development'; 
module.exports = function(options){ 
    console.log("Running in " + environment+ " mode"); 
    isProd = options.env === 'production'; 
    return { 
    context: helpers.root(''), 
    entry: { 
     ... // Shouldn't matter since it is overridden 
    }, 
    resolve: { 
     extensions: ['', '.js', '.ts', '.coffee', '.pug', '.styl', '.less', '.css'], 
     modules: [helpers.root('src'), 'node_modules'] 
    }, 
    output: { 
     filename: "[name].js", 
     path: path.join(helpers.root(''), "src/main/webapp") 
    }, 
    module: { 
     loaders: [ 
     {test: /\.pug$/, loader: "pug-html-loader"}, 
     {test: /\.ts$/, loader: 'ts'}, 
     { 
      test: /\.coffee$/, 
      loaders: ["coffee-loader", "coffee-import"] 
     }, 
     {test: /\.html$/, loader: "html?interpolate=require&-minimize"}, 
     { 
      test: /\.less$/, 
      loader: "style-loader!css-loader!less-loader" 
     }, 
     {test: /\.css$/, loader: "style-loader!css-loader"}, 
     // I have to add the regex .*? because some of the files are named like... fontello.woff2?952370 
     { 
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?.*)?$/, 
      loader: 'url?limit=900000' 
     } 
     ] 
    }, 

    plugins: [ 
     new HtmlWebpackPlugin({ 
     template: helpers.root('src/main/html/index.html') 
     }) 
    ] 
    } 
}; 

Но для какой-то причине, когда я бегу karma run я получаю ...

Chrome 53.*** (Mac OS X ***) ERROR 
    Uncaught SyntaxError: Unexpected token import 
    at src/main/typescripts/polyfills.ts:1 

Если я

preprocessors: { 
     '../src/main/coffee/**/*.coffee': ['webpack'], 
     '../src/main/typescripts/**/*.ts': ['webpack'], 
     '../src/test/**/*.coffee': ['coffee'] 
}, 

в нечто вроде ...

preprocessors: { 
     './src/main/coffee/**/*.coffee': ['webpack'], 
     './src/main/typescripts/**/*.ts': ['webpack'], 
     './src/test/**/*.coffee': ['coffee'] 
}, 

я

path: '/_karma_webpack_/src/main/coffee/utilities/view/My.coffee' }

Error: no such file or directory

Update

Ok так вот сделка я могу сказать WebPack не работает в моей дело. Вот почему транспиляция не работает, остается вопрос, почему?

Я делаю это почти точно как https://github.com/AngularClass/angular2-webpack-starter. Единственное, что это не работает, когда я ссылаюсь на карму, как они делают с module.exports = require('./config/karma.conf.js');. Это, кажется, нет никакой проблемы, если я перееду фактическую карму конф в корневую папку (в настоящий момент в src/build/karma.conf.js)

Update 2

Я попытался переместить webpack.test.js в корневую папку и попытался настроить для использования этого файла еще раз, но он по-прежнему не удается, так что я должен вернуться к webpack.config.js

webpack.test.js

// TODO: I would like this in the source folder but karma-webpack fails 

const webpack = require("webpack"); 
const webpackMerge = require('webpack-merge'); // used to merge webpack configs 
const commonConfig = require('./src/build/webpack.common.js'); // the settings that are common to prod and dev 
const glob = require('glob-all'); 
const tests = glob.sync([ 
    './src/test/webapp/**/*.coffee' 
]); 
const ENV = process.env.ENV = process.env.NODE_ENV = 'test'; 
module.exports = function (options) { 
    return webpackMerge(commonConfig({env: ENV}), { 
    entry: { 
     tests: '../src/test/**/*.coffee' 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
     names: ['tests', 'styles', 'app', 'vendor', 'polyfills'], 
     minChunks: Infinity 
     }) 
    ] 
    }) 
}; 

webpack.config.js

var environment = process.env.NODE_ENV || 'development'; 
switch (environment) { 
    case 'prod': 
    case 'production': 
    module.exports = require('./src/build/webpack.prod')({env: 'production'}); 
    break; 
    case 'test': 
    case 'testing': 
    module.exports = require('./webpack.test.js')({env: 'test'}); 
    break; 
    case 'dev': 
    case 'development': 
    module.exports = require('./src/build/webpack.dev')({env: 'development'}); 
    break; 
    default: 
    module.exports = require('./src/build/webpack.common')({env: 'common'}); 

Answer 1

Uncaught SyntaxError: Unexpected token import

Clear симптом, который машинопись не получает скомпилированы перед передачей на время выполнения JS.

Fix

Изменить

{test: /\.ts$/, loader: 'ts'}, 

To:

{test: /\.ts$/, loader: 'ts-loader'}, 

Больше

См Quickstart: https://github.com/TypeStrong/ts-loader#configuration