解决uni-app中ES6可选链语法导致的白屏问题

问题现象

在uni-app开发过程中，当代码中使用了ES2020的可选链操作符(?.)时，运行到iOS或Android模拟器上会出现白屏现象，控制台报错提示"Uncaught SyntaxError: Unexpected token ?"。

问题原因

这个问题的根本原因是部分运行环境（尤其是较旧的移动设备或模拟器）的JavaScript引擎不支持ES2020的新语法特性。可选链操作符(?.)是ES2020引入的新特性，用于简化深层嵌套对象的属性访问。

解决方案

方案一：升级Node.js版本

确保开发环境中的Node.js版本足够新。建议使用最新的LTS版本（目前是18.x或20.x），因为新版本对ES新特性的支持更好。

方案二：配置Babel转译

对于uni-app项目，可以通过配置Babel来将ES6+语法转译为ES5语法，确保兼容性。

1. 安装必要的Babel插件：

npm install --save-dev @babel/plugin-proposal-optional-chaining

2. 修改babel.config.js配置文件：

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'usage',
        polyfills: [
          'es6.promise',
          'es6.symbol',
        ],
        targets: {
          edge: "17",
          firefox: "60",
          chrome: "67",
          safari: "11.1",
        },
      },
    ],
  ],
  plugins: [
    ['@babel/plugin-proposal-optional-chaining'],
  ],
};

方案三：配置browserslist

在项目根目录下的package.json文件中添加或修改browserslist配置：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not dead",
  "not ie <= 11"
]

最佳实践建议

1. 对于uni-app项目，建议始终使用Babel进行语法转译，确保代码在各种运行环境下的兼容性。

2. 在团队开发中，统一Node.js版本，可以通过.nvmrc文件或文档说明来规范。

3. 对于新项目，建议在项目初始化时就配置好Babel和browserslist，避免后期出现兼容性问题。

4. 如果使用了第三方插件/库也包含新语法，同样需要通过Babel进行转译处理。

注意事项

1. 修改Babel配置后，需要重新启动开发服务器才能生效。

2. 如果使用了HBuilderX，还需要检查其内置的Node.js版本是否足够新。

3. 生产环境构建时，确保构建命令正确加载了Babel配置。

通过以上方法，可以有效解决uni-app中因ES6+新语法导致的白屏问题，确保应用在各种运行环境下都能正常工作。