javascript-eval动态引入mqtt.min.js

在项目中一般mqtt是某一个特定的功能才会使用mqtt，而且mqtt体积也不小，所以一般是打开某些功能的时候才会进行mqtt加载，一般情况就是用fetch和eval配合一下。

fetch('/cdn/mqtt.min.js').then(res=> {
    res.text().then(t=> {
        let mqtt = eval(`${t};mqtt`)
        console.log(mqtt)
        const url = 'ws://127.0.0.1:8083/mqtt'
                const options = {
                    clean: true,
                    connectTimeout: 4000,
                    clientId: 'test',
                    username: 'test',
                    password: 'test',
                }
                const client = mqtt.connect(url, options)
                client.on('connect', function () {
                    client.subscribe('test', function (err) {
                        if (!err) {
                            client.publish('test', 'Hello mqtt')
                        }
                    })
                })

                client.on('message', function (topic, message) {
                    console.log(message.toString())
                })
    })
})

看了mqtt.Js的源码，因为它是直接var mqtt = .... 这样子的，在使用script标签加载的时候会产生一个全局变量mqtt，但是eval的时候不会产生这个全局的mqtt对象，所以需要拼接一下代码将里面声明的mqtt返回处理.

看看下面的代码就大概知道eval是怎么返回变量的了,eval会将最后一个语句块作为结果返回

let str = `var a = 1`;
let res = eval(str);
console.log(res)

//此时eval返回的var a = 1的结果， 所以输出的是undefined
//undefined


let str = `var a = 1;a`;
let res = eval(str);
console.log(res)
//此时eval返回的a的结果，因为a是最后的代码块， 所以输出的是1
//1

//分号; 是语句块结束的标记和换行是一样的
let str = `var a = 1
a`;
let res = eval(str);
console.log(res)
//此时eval返回的a的结果，因为a是最后的代码块， 所以输出的是1
//1