Cypress预处理器解析可选链报错及所需Webpack loader咨询

1. ?. 语法的正式名称 #

代码中?.表达式的正式名称为可选链操作符（Optional Chaining Operator），是ES2020（ES11）正式纳入标准的JavaScript语法。该语法允许开发者在读取嵌套对象属性、调用方法时，无需提前校验链路上每一级引用是否为空——如果链路中某一级值为null或undefined，表达式会直接短路返回undefined，不会抛出属性读取错误，示例代码正是用这个特性避免defaultScreenshotOptions为空时读取errorThreshold抛错。

2. Webpack编译错误解决方案 #

报错根因：当前使用的Webpack环境无法识别ES2020可选链语法，且cypress-visual-regression包发布时未将源码中的高版本JS语法向下转译，同时现有Webpack loader规则默认跳过了node_modules目录下的文件，导致该文件没有经过语法处理就被Webpack解析。
需要配置的核心loader为babel-loader，配合Babel核心依赖完成高版本语法转译，操作步骤如下：

• 安装所需开发依赖：

npm install -D babel-loader @babel/core @babel/preset-env

• 修改Cypress文件预处理器关联的Webpack配置，新增JS文件处理规则，注意不要将cypress-visual-regression排除在转译范围外，参考配置：

// 对应Cypress插件配置中的webpackOptions字段
module: {
  rules: [
    {
      test: /\.js$/,
      // 排除node_modules中除cypress-visual-regression外的其他文件
      exclude: /node_modules\/(?!cypress-visual-regression)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', {
              targets: { esmodules: true }
            }]
          ]
        }
      }
    },
    // 原有其他loader规则（如处理ts、静态资源的规则）保持不变
  ]
}

如果你使用Webpack 5及以上版本，原生已支持可选链语法，出现该问题基本是因为loader规则排除了目标文件，调整exclude范围让Webpack处理cypress-visual-regression目录下的文件即可。

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