Javascript 实例化es6类

我正在尝试使用es6建立聊天室连接类。我使用rabbitmq/STOMP将exchange数据推送到订阅者。我使用的代码是es5风格的，但我硬编码了exchange名称。我正在使用webpack/babel将此代码传输回名为

chat.bundle.js

的文件中的es5，但当我运行时：

var聊天室=新聊天室（“thisExchange”）

控制台日志：
uncaughtreferenceerror:未定义聊天室

加载包文件后（在包的脚本标记下方），我正在实例化类
聊天室

我知道
load（）
函数可能无法工作。。。我是es6类新手，不知道如何让window.load工作，但这是一个单独的问题。现在，我只想通过提供
exchangeName
的参数来实例化这个类，然后在此之后继续处理新的错误

以下是我写得非常糟糕的es6课程：

// Use SockJS
Stomp.WebSocketClass = SockJS;
// Connection parameters
var mq_username = "guest",
mq_password = "guest",
mq_vhost    = "/",
mq_url      = 'http://localhost:15674/stomp',
mq_queue    = "/exchange/${this.exchange}";
var output;
var client = Stomp.client(mq_url);

class ChatRoom {
    constructor(exchange){
        this._exchange=exchange;
    }
    get exchange(){
        return this._exchange;
    }

    toString() {
        return `${this.exchange}`
    }

    on_connect() {
    output.innerHTML += 'Connected to RabbitMQ-Web-Stomp<br />';
    console.log(client);
    client.subscribe(mq_queue, on_message);
}

// This will be called upon a connection error
    on_connect_error() {
        output.innerHTML += 'Connection failed!<br />';
    }

// This will be called upon arrival of a message
on_message(m) {
    console.log('message received');
    console.log(m);
    output.innerHTML += m.body + '<br />';
}

load(){
    return new Promise(function(resolve,reject){
        window.onload =  () => {
            // Fetch output panel
            output = document.getElementById("output");

            // Connect
            client.connect(
                self.mq_username,
                self.mq_password,
                self.on_connect,
                self.on_connect_error,
                self.mq_vhost
            );
        }
    });
}


}

//使用SockJS
Stomp.WebSocketClass=SockJS；
//连接参数
var mq_username=“guest”，
mq_password=“guest”，
mq_vhost=“/”，
mq_url=http://localhost:15674/stomp',
mq_queue=“/exchange/${this.exchange}”；
var输出；
var client=Stomp.client（mq_url）；
课堂聊天室{
建造商（交易所）{
这个._exchange=exchange；
}
获取交换（）{
把这个还给我；
}
toString（）{
返回`${this.exchange}`
}
on_connect（）{
output.innerHTML+=“已连接到RabbitMQ Web Stomp
”；
console.log（客户端）；
订阅（mq_队列，on_消息）；
}
//这将在连接错误时调用
关于连接错误（）{
output.innerHTML+=“连接失败！
”；
}
//这将在消息到达时调用
on_消息（m）{
console.log（“收到消息”）；
控制台日志（m）；
output.innerHTML+=m.body+'
'；
}
加载（）{
返回新承诺（功能（解决、拒绝）{
window.onload=（）=>{
//获取输出面板
输出=document.getElementById（“输出”）；
//连接
client.connect(
self.mq_用户名，
self.mq_密码，
self.on_connect，
self.on\u connect\u错误，
self.mq_vhost
);
}
});
}
}

在我的html文件中，脚本标记的结构如下：

<script src="static/chat.bundle.js"></script>
<script>var chatRoom=new ChatRoom('soccer@newark');</script>


var聊天室=新聊天室（'soccer@newark');

Webpack构建成功，并且不会对聊天包的es6文件的语法产生任何抱怨，如上所示
 通常，webpack之类的模块绑定器不会公开模块局部变量。
如果要将类导出为公共API，请在文件末尾添加
module.exports
expression

module.exports = ChatRoom;

注意：您可能希望使用
导出默认聊天室
，而不是
模块。导出
。但是请注意，Babel自6.0版以来，在
default
键下导出默认值，而不是整个导出。有关更多信息，请参阅

但这还不够。您还需要安装Webpack以从代码创建库。将以下内容添加到webpack.config.js中

output: {
    library: 'ChatRoom',
    libraryTarget: 'umd'
},

有关更多详细信息，请参见
，您的类可能从未定义过。您是否处于“严格使用”模式？如果没有，这可能与以下帖子的答案相同：一些提示：chat.bundle.js文件是否正确创建（没有任何错误）？你什么时候做
var聊天室=新建聊天室（'thisExchange'）？检查访问
output
时的位置&我在包含脚本标记的HTML文件中添加了几行。包文件中似乎没有任何错误