Angular 2.0.0 在 karma-test-shim.js 中使用保留字 'import' - 在 JS 输出中包含 Angular TypeScript 文件？

Question

升级到 Angular 2.0.0 后，我从 PhantomJS 收到此错误：

START:
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
    SyntaxError: Use of reserved word 'import'
    at karma-test-shim.js:4115
Chrome 53.0.2785 (Mac OS X 10.11.6) ERROR
    Uncaught SyntaxError: Unexpected token import
    at http://localhost:9876/context.html:8

当我查看 Chrome DevTools 中第 4115 行的 karma-test-shim.js 时，我发现它试图包含 @angular/core/testing:

的 ts

    eval("/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import { Injector, NgModule, NgZone, OpaqueToken } from '@angular/core';
import { AsyncTestCompleter } from './async_test_completer';
import { ComponentFixture } from './component_fixture';
import { ListWrapper } from './facade/collection';
import { FunctionWrapper, stringify } from './facade/lang';
import { TestingCompilerFactory } from './test_compiler';
var UNDEFINED = new Object();
/**
* An abstract class for inserting the root test component element in a platform independent way.
*
* @experimental
*/
export var TestComponentRenderer = (function () {
    function TestComponentRenderer() {
    }
    TestComponentRenderer.prototype.insertRootElement = function (rootElementId) { };
    return TestComponentRenderer;
}());
var _nextRootElementId = 0;
/**
* @experimental
*/
export var ComponentFixtureAutoDetect = new OpaqueToken('ComponentFixtureAutoDetect');
/**
* @experimental
*/
export var ComponentFixtureNoNgZone = new OpaqueToken('ComponentFixtureNoNgZone');
/**
* @experimental
*/
export var TestBed = (function () {
    ...

我的webpack.test.config（这个包只有test）

process.env.npm_lifecycle_event = 'test';
var webpack = require('webpack'),
basicConf = {},
path = require('path');

var NODE_MODULES = root("node_modules");

// Helper functions
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}

basicConf.entry = {};

basicConf.devtool = "eval";
basicConf.debug = true;

basicConf.resolve = {
cache: true,
fallback: [ NODE_MODULES ],
modulesDirectories: [ NODE_MODULES ],
root: [ root("") ],
extensions: ["", ".ts", ".js", ".json", ".css", ".scss", ".html"]
};

basicConf.module = {
loaders: [
    {
    test: /\.ts$/,
    loader: "ts",
    query: {
        "ignoreDiagnostics": [
        2403, // 2403 -> Subsequent variable declarations
        2300, // 2300 -> Duplicate identifier
        2374, // 2374 -> Duplicate number index signature
        2375, // 2375 -> Duplicate string index signature
        2502  // 2502 -> Referenced directly or indirectly
        ]
    }
    },

    {test: /\.scss$/, loader: "null"},
    {test: /\.css$/, loader: "null"},
    {test: /\.html$/, loader: "raw"},
    {test: /\.json$/, loader: "json"}
],
postLoaders: [
    {
    test: /\.(js|ts)$/,
    include: path.resolve("."),
    loader: "istanbul-instrumenter-loader",
    exclude: [/.+-spec\.ts$/, /\.e2e\.ts$/, NODE_MODULES]
    }
]
};

module.exports = basicConf;

什么会导致 webpack/karma 在 karma-test-shim.js 输出中包含一个 ts 文件？此代码可以被另一个项目利用并正确执行。我似乎无法运行测试。

我的实际 karam.test.shim.js:

Error.stackTraceLimit = Infinity;

require('core-js/es6');
require('core-js/es7/reflect');
require('ts-helpers');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
require('rxjs/Rx');
require("material-design-lite/dist/material.min.js");

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

testing.TestBed.initTestEnvironment(
    browser.BrowserDynamicTestingModule,
    browser.platformBrowserDynamicTesting()
);

var testContext = require.context('.', true, /.+-spec\.ts/);
function requireAll(requireContext) {
    return requireContext.keys().map(requireContext);
}
var modules = requireAll(testContext);

Answer 1

简单来说，必须迁移到webpack 2.0.0-beta.25

Angular 2.0.0 在 karma-test-shim.js 中使用保留字 'import' - 在 JS 输出中包含 Angular TypeScript 文件？

Angular 2.0.0 Use of reserved word 'import' at karma-test-shim.js - including Angular TypeScript file in JS output?

unit-testing

karma-runner

karma-jasmine

webpack

angular