Vite构建JS库:ES6代码未转译为ES5的解决方案
使用Vite构建JS库时,开发者经常遇到ES6代码未转译为ES5的问题,导致库在旧版浏览器环境中出现兼容性错误。本文分析一个案例,并提供解决方案。
案例中,开发者使用Vite构建JS库,使用了ES6的空值合并运算符(??),但打包后的代码仍包含ES6语法,导致报错。
解决方案:
为了确保ES5兼容性,需要将targets配置修改为明确指定低版本浏览器,
或者,为了更精细的控制,可以考虑使用一个更全面的浏览器兼容性列表,例如browserslist提供的配置。 此外,需排除其他可能导致错误的原因,例如node环境版本差异。 只有在排除了其他因素后,再调整Babel配置。 确保@babel/preset-env插件已正确安装。
通过修改targets配置,Babel将正确地将ES6代码转译为ES5,从而解决兼容性问题。 记住,选择合适的targets配置取决于你的目标浏览器支持范围。