移动端H5在低版本安卓白屏主因是JS语法不兼容及API缺失，需通过Babel配合@babel/preset-env与core-js@3按需注入polyfill，精准配置targets（如chrome: "30"）、启用useBuiltIns: "usage"，并在入口文件导入core-js/stable，同时禁用破坏性插件并真机验证。
移动端H5在低版本安卓（尤其是Android 4.4 WebView、部分国产定制ROM）白屏，多数是因为JS语法不被识别（如箭头函数、解构赋值、async/await），或Promise、Array.from等API缺失。Babel本身不执行polyfill注入，需配合@babel/preset-env和core-js按需补全。
配置targets精准匹配安卓WebView版本
不能只写"android": "4.4"，要明确指定实际运行环境的引擎——低版本安卓用的是系统WebView（基于Chromium旧内核），需查对应Chrome版本。例如Android 4.4.2对应Chrome 30，Android 5.1对应Chrome 39。
- 在
.babelrc或babel.config.js中设置targets为具体浏览器版本，如：{"chrome": "30", "android": "4.4"} - 避免写
"ie": "11"这类无关目标，会增加无用代码 - 推荐用
browserslist统一管理，在package.json里写："browserslist": ["Android >= 4.4", "Chrome >= 30"]
启用useBuiltIns: 'usage' + core-js@3按需注入
全局引入core-js/stable会打包全部polyfill，体积大且易冲突；useBuiltIns: 'usage'让Babel自动在用到API的地方插入对应polyfill。
- 安装：
npm install --save core-js@3 - Babel配置中启用：
{ "presets": [["@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3 }]] } - 确保项目入口文件（如
main.js）顶部有import 'core-js/stable';（仅需这一行，Babel会据此分析并注入） - 不要同时引入
regenerator-runtime，core-js@3已内置Promise、Symbol、Array.from等常用垫片
检查并禁用破坏性插件
某些Babel插件会生成ES5不兼容代码，尤其在低版本安卓WebView中触发语法错误导致白屏。
立即学习“Java免费学习笔记（深入）”；
- 禁用
@babel/plugin-transform-classes（默认开启），改用@babel/plugin-transform-function-name等更稳妥的转换 - 关闭
loose: true模式，它可能生成非标准代码（如把class转成带__proto__的操作，Android 4.4不支持） - 确认没误启
@babel/plugin-transform-arrow-functions单独配置——preset-env已按targets自动处理，重复启用可能出错
验证是否真正生效
白屏问题常因“以为配好了，其实没生效”导致。上线前必须真机验证：
- 构建后打开
dist目录下JS文件，搜索Promise、Array.from等关键词，确认对应polyfill代码存在 - 在Android 4.4真机或Genymotion模拟器中调试：打开Chrome DevTools → 远程调试 → 查看Console是否有
ReferenceError或SyntaxError - 若仍白屏，临时在
index.html头部加<script>console.log('start');，确认JS是否执行到第一步
