Javascript 引用错误：Can'；找不到变量：映射

我正在使用Angular 4、Webpack 2.4.1、Karma 1.6和Jasmine 2.6.1，并且正在编写ES2015而不是打字脚本

我有一个小的angular演示应用程序，我想添加单元测试。演示应用程序本身正在工作，Webpack正在正确绑定所有内容，但当我尝试运行单元测试时，我在控制台中看到一些错误，如下所示：

ReferenceError:找不到变量：Map

在Static/js/app.welcome.js:2569

（app.welcome.js是我的组件的名称）

Webpack似乎正确地构建了我的测试包，Karma服务器正确启动，PhantomJS正确启动，但随后我看到了一些映射错误

我肯定在自己的代码中没有使用

Map（）

构造函数

这是我的档案-

app.welcome.js：

import {Component} from '@angular/core';

class WelcomeComponent {
    constructor () {
        this.welcomeMessage = 'Welcome to Angular 4';
    }
}

WelcomeComponent.annotations = [
    new Component({
        selector: 'my-app',
        template: '<h1>{{welcomeMessage}}</h1>'
    })
];

export {WelcomeComponent};

import {TestBed} from '@angular/core/testing';
import {WelcomeComponent} from '../../js/app.welcome';

describe('The Welcome component', function () {

    let component;

    beforeEach(function() {
        TestBed.configureTestingModule({
            declarations: [WelcomeComponent]
        });

        const fixture = TestBed.createComponent(WelcomeComponent);
        component = fixture.componentInstance;
    });

    it('should be a component', function() {
        expect(component).toBeDefined();
    });

    it('should have a welcome message', function () {
        expect(component.welcomeMessage).toEqual('Welcome to Angular 4');
    });

});

const webpack = require('webpack');

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: [
            './Static/js/**/*.js',
            './Static/test/**/*.spec.js'
         ],
         exclude: [
             './Static/js/main.js'
         ],
         preprocessors: {
             './Static/js/**/*.js': ['webpack'],
             './Static/test/**/*.spec.js': ['webpack']
         },
         reporters: ['progress'],
         port: 9876,
         colors: true,
         logLevel: config.LOG_INFO,
         autoWatch: false,
         browsers: ['PhantomJS'],
         singleRun: true,
         concurrency: Infinity,
         webpack: {
             module: {
                 rules: [{
                     test: /\.js$/,
                     use: [{
                         loader: 'babel-loader',
                         options: { presets: ['es2015'] }
                     }]
                 }]
             },
             plugins: [
                 new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, './src')
             ]
         }
     })
}

karma.conf.js：

import {Component} from '@angular/core';

class WelcomeComponent {
    constructor () {
        this.welcomeMessage = 'Welcome to Angular 4';
    }
}

WelcomeComponent.annotations = [
    new Component({
        selector: 'my-app',
        template: '<h1>{{welcomeMessage}}</h1>'
    })
];

export {WelcomeComponent};

import {TestBed} from '@angular/core/testing';
import {WelcomeComponent} from '../../js/app.welcome';

describe('The Welcome component', function () {

    let component;

    beforeEach(function() {
        TestBed.configureTestingModule({
            declarations: [WelcomeComponent]
        });

        const fixture = TestBed.createComponent(WelcomeComponent);
        component = fixture.componentInstance;
    });

    it('should be a component', function() {
        expect(component).toBeDefined();
    });

    it('should have a welcome message', function () {
        expect(component.welcomeMessage).toEqual('Welcome to Angular 4');
    });

});

const webpack = require('webpack');

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: [
            './Static/js/**/*.js',
            './Static/test/**/*.spec.js'
         ],
         exclude: [
             './Static/js/main.js'
         ],
         preprocessors: {
             './Static/js/**/*.js': ['webpack'],
             './Static/test/**/*.spec.js': ['webpack']
         },
         reporters: ['progress'],
         port: 9876,
         colors: true,
         logLevel: config.LOG_INFO,
         autoWatch: false,
         browsers: ['PhantomJS'],
         singleRun: true,
         concurrency: Infinity,
         webpack: {
             module: {
                 rules: [{
                     test: /\.js$/,
                     use: [{
                         loader: 'babel-loader',
                         options: { presets: ['es2015'] }
                     }]
                 }]
             },
             plugins: [
                 new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, './src')
             ]
         }
     })
}

我尝试过向我的测试文件添加导入，比如

import'zone.js'和
导入“核心js/es6”在阅读了这里的其他答案后，但这没有帮助

我已经看过了，我似乎没有遗漏前面的基本示例中的任何重要内容，但问题是所有的官方文档都面向TypeScript，而我想使用ES2015

据我所知，Map是ES2015中的一种新型对象，而不是错误指示的变量。巴贝尔不应该支持这个吗

有人能帮忙吗？
由于浏览器中没有
Map
，因此引发此错误。PhantomJS用作Karma驱动程序，不支持ES6功能

如果polyfills（例如，
core js
）未加载到测试中包含的文件中，则应单独加载，例如通过插件：

这就是我的工作：
我使用了PhantonJs和karma以及nightwatch进行测试。我在JhantomJs初始化和测试开始时遇到了这个错误，因为浏览器中没有映射。PhantomJS用作Karma驱动程序，不支持ES6功能

我尝试加载多边形填充，但也没有帮助。
然后我看到对PhantonJs的支持已经消失很久了，我觉得它不会起作用。所以我尝试用Chrome无头浏览器替换PhantomJs，令人惊讶的是，它很容易被替换

以下是我将PhantomJs更改为Chrome headless所做的事情：

Package.json-木偶师、chromedriver、karma chrome启动器作为依赖项
在karma.conf.js中添加以下内容
在nightwatch.json中添加/编辑以下内容
这是对我有用的东西；可能对您有效，也可能无效，这取决于您在JhantomJs测试中使用的副产品类型。尽管如此，对于任何试图移开PhantomJs的人来说都应该是有帮助的。
谢谢，我试过了，但是消息刚刚更改为
ReferenceError:cannotfind variable:WeakMap
，因为es6 shim不支持WeakMap。大多数浏览器现在都支持地图，令人难以置信的是，根据Kangax的说法，即使IE11也有基本的支持！但是，难道巴贝尔不应该通过网页为这些东西提供支持吗？不，巴贝尔不应该。有，应该是手动加载的。看见是的，幻影很简单，但是没有人强迫你用它来因果报应。如果需要，您可以使用Chrome驱动程序。请参见为什么es6-shim中不包含它。好吧，Babel Webpack插件的全部目的是将ES2015->ES5作为捆绑的一部分进行传输。但我会尝试Chrome浏览器而不是PhantomJS。我听说Chrome headless是新的热门：）事实上，它可以传输所有不能多填充的代码。需要注意的是，有些东西根本不能进行多重填充（比如代理）。如果巴贝尔强行应用所有多边形填充，没有人会高兴，这将产生比它解决的问题多得多的问题。我还没有尝试过headless Chrome，但是headless Chrome已经做了很长时间了。我尝试过几种不同的方法，但是现在每次运行我都会遇到一个不确定的单元测试失败。这有顺序或时间依赖关系吗？我看到的确切消息是：
ReferenceError:找不到变量：映射抛出