使用现代Web工具支持旧浏览器
内容提要
近年来，IE已过时，Web开发人员不再需要担心向后兼容性。然而，在某些情况下，仍需支持旧浏览器，特别是在工业环境中。作者在开发基于Chromium 56的旧Qt嵌入式浏览器的人机界面时遇到了挑战。通过使用Vite-Plugin-Legacy、PostCSS Preset Env和PNPM-Patch等工具，可以相对容易地支持这些古老的平台。
延伸解读
工业场景下的旧浏览器支持需求
尽管IE等旧浏览器在消费级市场已基本淘汰，但工业环境中的嵌入式设备仍可能运行着基于Chromium 56等老旧引擎的浏览器。这些设备往往生命周期长、更新困难，导致开发者不得不考虑向后兼容性。本文作者在为工业人机界面开发Web应用时，就遇到了必须支持Chromium 56的挑战。这提醒我们，在特定领域，旧浏览器支持仍是现实需求。
现代工具链对旧浏览器的适配策略
面对Chromium 56仅支持ES5、无ES模块等限制，作者通过Vite插件生成现代与旧版双捆绑包，并利用PostCSS Preset Env为CSS添加前缀和polyfill。这些工具基于Browserslist目标自动处理兼容性，使得开发者能在保留现代开发体验的同时，输出适配旧浏览器的代码。关键在于合理配置目标浏览器，并了解工具的能力边界。
处理CSS Grid与BigInt等兼容性陷阱
即使有工具辅助，仍有一些棘手问题。例如，CSS Grid的polyfill性能不佳，作者建议回退到Flexbox加margin的布局方案。对于依赖项中使用的BigInt，Babel无法提供polyfill，此时可通过pnpm patch直接修改依赖源码，移除或替换BigInt。这些变通方法虽不优雅，但能有效解决特定兼容性问题，确保应用在旧环境中运行。
Q&A
为什么仍然需要支持旧浏览器？
在某些情况下，尤其是在工业环境中，仍需支持旧浏览器。
开发基于Chromium 56的浏览器时遇到哪些挑战？
主要挑战包括仅支持ES5的JavaScript、没有ES模块、有限的CSS支持和缺少BigInt数据类型。
如何使用Vite支持旧浏览器？
可以使用Vite-Plugin-Legacy将现代JavaScript转换为ES5并添加必要的polyfills。
PostCSS Preset Env在支持旧浏览器中有什么作用？
PostCSS Preset Env可以增强旧浏览器的CSS支持，确保兼容性。
在处理CSS Grid时有什么建议？
建议使用Flexbox作为替代方案以提高性能。
如何处理依赖项中的BigInt问题？
可以使用pnpm的补丁功能修补依赖项，替换或移除BigInt的使用。
