Question

我正在尝试使用es6来创建聊天室连接类。我正在使用rabbitmq / STOMP将交换数据推送给订阅者。我使用的代码以es5风格工作，但我正在硬编码交换名称。我正在使用webpack / babel将此代码转发回es5，在一个名为chat.bundle.js的文件中，但是当我运行时：

var chatRoom = new ChatRoom('thisExchange');

控制台记录：Uncaught ReferenceError: ChatRoom is not defined

我在加载bundle文件后实例化类ChatRoom（在bundle的这个脚本标记下面）。

我知道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
            );
        }
    });
}


}

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

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

Webpack构建成功，并没有抱怨聊天包的es6文件的语法，如上所示。

Answer 1

通常，诸如webpack之类的模块捆绑包不会暴露模块本地。如果您要将您的班级ChatRoom导出为公开API，请在文件末尾添加module.exports表达式

module.exports = ChatRoom;

NB 您可能希望使用export default ChatRoom代替module.exports。但请注意，Babel自6.0版本导出默认值为default密钥而不是整个导出。有关详细信息，请参阅this question and answers。

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

中

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

有关详细信息，请参阅webpack docs

实例化es6类

1 个答案: