时间戳

首页 > 解决方案 > 如何使用 RequireJS 所需的库

javascript - 如何使用 RequireJS 所需的库

问题描述

我尝试使用REQUIREJS导入MQTT ，但出现错误：

未捕获的 ReferenceError：未定义 mqtt

我尝试运行的代码位于 HTML 文件中：

HTML

    <script>
    require(["https://unpkg.com/mqtt@3.0.0/dist/mqtt.min.js"], function (mqtt) {
        console.log("Libraries loaded");
    })
</script>
<script src="../text-to-speech/sub_mqtt.js"></script>

sub_mqtt

    //MQTT Connection
function mqtt_connect() {
    //var mqtt = require('mqtt'); // Should I use it?
    var client = mqtt.connect({ host: 'test', port: port })
    var topic = 'mytopic'

    client.on('message', (topic, message) => {
    });


    client.on('connect', () => {
        client.subscribe(topic);
        console.log("Connected!")
    });
};

mqtt_connect();

我知道如果我将此代码复制到第一个script回调中，我会解决错误，但我想在不同的文件中执行它以避免过度拥挤 HTML。

标签： javascriptrequirejs

解决方案

RequireJS 是异步模块加载器，所以你的加载方法是错误的，因为你不能保证 mqtt 会在你的脚本之前被加载。

为确保您的代码在 mqtt 加载后执行，您必须将其作为回调传递给 RequireJS。首先，将您的 HTML 代码修改为：

<script src="../text-to-speech/sub_mqtt.js"></script>

然后编辑您的sub_mqtt脚本并确保您的代码是对 RequireJS 的回调：

require(['https://unpkg.com/mqtt@3.0.0/dist/mqtt.min.js'], function (mqtt) {
    var client = mqtt.connect({ host: 'test', port: port })
    var topic = 'mytopic'

    client.on('message', (topic, message) => {
    });


    client.on('connect', () => {
        client.subscribe(topic);
        console.log("Connected!")
    });
});

推荐阅读