Ionic应用tsconfig target改为ES2020是否兼容旧移动平台

结论 #

直接将Ionic应用的target改为ES2020、module改为commonjs会在老旧移动设备上出现兼容性问题，具体原因和优化方案如下：

兼容性问题根源

• ES2020语法不兼容老旧WebView：ES2020包含的可选链?.、空值合并运算符??、BigInt、Promise.allSettled等特性，在Android 7及以下系统WebView、iOS 13及以下版本的Safari/WebKit内核中均不原生支持，直接运行ES2020代码会抛出语法错误，导致应用白屏或功能崩溃。
• commonjs模块配置不适配前端打包逻辑：Ionic React默认基于ES模块规范开发，配合Webpack/Vite等打包工具做tree shaking优化包体积，改为commonjs后会导致tree shaking失效，最终包体积明显变大，部分打包工具对commonjs模块的处理还可能引入额外的运行时错误。

可落地的优化方案

不需要强制让Ionic应用的tsconfig和服务端配置对齐，可根据你的业务场景选择以下方案：

1. 给commons包配置多产物输出：用tsup、rollup等工具给commons同时输出两份产物：一份ES2020 + commonjs产物供server包使用，一份ES5 + ES模块产物供ionic-app使用，在package.json中通过exports字段配置不同环境的产物引入规则即可。
2. 保留Ionic应用原有tsconfig配置：不需要修改target和module，打包时配置打包工具将commons包的代码一起纳入转译范围，自动把commons的ES2020代码降级为适配目标设备的语法即可。
3. 若你的应用最低兼容版本为Android 10+、iOS 14+，可以直接修改配置：这两个版本及以上的系统WebView已经完整支持ES2020的所有特性，不会出现兼容问题，修改前可以先统计现有用户的设备版本占比确认。

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