如何将Angular 17 ES6应用转译为ES5以适配Android 10设备

一、通过Angular CLI配置Babel post-build转译 #

可以在angular.json中配置构建后钩子，用Babel将编译后的JS代码转译为ES5兼容语法，步骤如下：

1. 安装Babel依赖

npm install @babel/core @babel/cli @babel/preset-env --save-dev

2. 根目录创建babel.config.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "80"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

3. 修改angular.json的build配置
   找到项目的build节点，添加postBuild脚本钩子：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:application",
        "options": {
          // 原有配置
        },
        "scripts": {
          "postBuild": "babel dist/your-project-name/browser --out-dir dist/your-project-name/browser --presets=@babel/preset-env"
        }
      }
    }
  }
}

注意：路径要匹配Angular 17的构建输出目录（默认是dist/项目名/browser），确保覆盖所有编译后的JS文件。

二、ng serve时的生效问题 #

默认情况下，ng serve采用内存编译，不会生成物理的dist目录，因此postBuild钩子不会触发，上述Babel转译不会生效。

如果需要在开发阶段验证兼容性，可以：

• 用Chrome DevTools的设备模拟功能，选择Chrome 79或更低版本的浏览器环境进行测试；
• 或者修改ng serve的配置，添加postServe钩子，但需要配合文件监听工具（如chokidar-cli）来实时转译内存中的文件，这种方式配置较繁琐，更推荐用模拟环境测试，正式构建时再用Babel转译。

三、升级WebView/Android 11的风险 #

升级设备WebView或Android系统版本确实存在破坏预装关键应用的可能性：

• 预装应用可能依赖旧WebView的特定API、行为或兼容性漏洞；
• Android系统升级会改变系统底层环境，部分旧应用可能无法适配新的权限机制、系统API。

如果要尝试升级，建议：

• 找同型号的备用设备进行测试，先备份设备数据；
• 部分Android 10设备支持在开发者选项中切换WebView实现（如临时换成Chrome Beta版），可先通过这种方式验证关键应用是否兼容，再决定是否批量升级。

四、之前尝试无效的原因 #

Angular 17默认使用ESBuild作为构建工具，tsconfig.json中的target字段会被ESBuild的配置覆盖。而且ESBuild仅会转译API（如Promise、Array.prototype.includes），不会转译可选链（?.）、空值合并（??）这类语法级特性——这些语法无法通过core-js polyfill解决，必须通过Babel这类工具进行语法转译。

内容的提问来源于stack exchange，提问作者ianrose2k