Webpack Karma Typescript Ng1: неперехваченная синтаксическая ошибка: неожиданный импорт токена

#angularjs #typescript #coffeescript #webpack #karma-webpack

#angularjs #typescript #coffeescript #webpack #karma-webpack

Вопрос:

У меня есть следующий файл 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
  })
};
  

и следующий веб-пакет…

 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=requireamp;-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

Обновить

Хорошо, итак, вот в чем дело, я могу сказать, что webpack не работает в моем случае. Вот почему перенос не работает, остается вопрос, почему?

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

Обновление 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'});
  

Ответ №1:

Неперехваченная синтаксическая ошибка: неожиданный импорт токена

Явный признак того, что TypeScript не компилируется перед передачей в среду выполнения JS.

Исправить

Изменение

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

Для:

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

Еще

Смотрите быстрый запуск : https://github.com/TypeStrong/ts-loader#configuration

Комментарии:

1. Я ценю ваш ответ, но почему изменение загрузчика помогло бы? Кажется, это работает, когда я загружаю его обычно через webpack. Кроме того, я думал, что ts эквивалентен ts-loader в webpack. Я все же попробую

2. Кстати, я согласен с вашим утверждением, что он не передается, однако, я бы предположил, что это в плагине karma-webpack.

3. да, та же проблема, извините, я дам вам некоторое время, чтобы исправить или удалить, прежде чем я проголосую. Я действительно ценю, что вы пытаетесь помочь! Также кажется, что это должно быть эквивалентно, поскольку другие загрузчики (coffee, stylus, pug, raw и т. Д.) Все не -loader учитывают, Также у меня не было проблем за пределами karma.