MQTT.js 在 Vite 构建中兼容旧版浏览器的解决方案

问题背景

在使用 Vue3 和 Vite 构建项目时，当引入 MQTT.js 5.4.0 及以上版本并启用 @vitejs/plugin-legacy 插件时，构建过程会出现关于 Big integer literals 的错误提示，导致构建失败。这个问题主要出现在需要兼容旧版浏览器（如 IE11 或 UC 浏览器）的项目中。

错误分析

构建错误显示："Big integer literals are not available in the configured target environment"，这表明 MQTT.js 5.x 版本使用了 ES2020 中的 BigInt 特性，而旧版浏览器不支持这一特性。Vite 的 legacy 插件在尝试将代码转换为兼容旧浏览器时，无法正确处理这些 BigInt 字面量。

解决方案

方案一：降级 MQTT.js 版本

最直接的解决方案是降级到 MQTT.js 4.1.0 版本，该版本不依赖 BigInt 特性，能够很好地兼容旧版浏览器：

npm install mqtt@4.1.0

方案二：配置 Vite 构建选项

如果必须使用 MQTT.js 5.x 版本，可以尝试调整 Vite 配置：

1. 在 vite.config.ts 中增加对 BigInt 的 polyfill
2. 调整 legacy 插件的配置

legacy({
  targets: ["defaults", "ie >= 11", "chrome 52"],
  additionalLegacyPolyfills: ["regenerator-runtime/runtime", "core-js/features/bigint"],
  polyfills: [
    // 原有polyfills...
    "es.bigint",
    "esnext.bigint"
  ]
})

方案三：使用预编译版本

可以考虑直接使用 MQTT.js 提供的预编译版本，通过 CDN 引入：

<script src="https://unpkg.com/mqtt@5.5.0/dist/mqtt.min.js"></script>

然后在代码中通过全局变量 mqtt 访问。

技术原理

MQTT.js 5.x 版本为了提升性能，在某些内部计算中使用了 BigInt 类型，这是 ES2020 引入的新特性。旧版浏览器（如 IE11）和某些移动端浏览器（如 UC 浏览器）不支持这一特性。Vite 的 legacy 插件虽然能处理大部分 ES6+ 特性的降级转换，但对 BigInt 的支持有限。

最佳实践建议

1. 如果项目必须支持旧版浏览器，推荐使用 MQTT.js 4.x 版本
2. 如果项目可以放弃对旧版浏览器的支持，可以移除 legacy 插件
3. 对于混合环境，可以考虑动态加载不同版本的 MQTT.js，根据浏览器能力决定使用哪个版本

总结

在现代化前端工具链中兼容旧版浏览器是一个常见的挑战。MQTT.js 5.x 版本对现代 JavaScript 特性的使用使得它在旧环境中运行时需要额外的处理。开发者应根据实际项目需求，在功能性和兼容性之间做出合理的选择。对于大多数需要广泛浏览器兼容性的物联网应用，暂时使用 MQTT.js 4.x 版本可能是更稳妥的选择。