rollup-plugin-polyfills-loader输出报错Expected ')',如何排查配置问题？

你遇到的Expected ')'报错是不支持ES6+语法的legacy浏览器（如IE11）抛出的语法错误：插件注入的polyfills loader代码本身包含了箭头函数、函数参数默认值等ES6特性，legacy浏览器无法解析这类语法，遇到箭头函数的=>标记时就会判定语法错误、提示缺少右括号。

你需要调整@web/rollup-plugin-polyfills-loader的配置，修复两个核心问题：

• 开启loader代码的legacy兼容转译
  新增legacyLoader: true配置项，插件会自动将注入的loader代码转译为兼容ES5的语法，移除箭头函数、参数默认值等不兼容特性。
• 修正legacy输出的加载配置
  你当前的配置没有指定legacy产物的加载类型，默认使用了ES module，但是legacy浏览器本身不支持ES module：
  1. 先调整你的rollup全局配置，将legacy版本的构建产物输出为systemjs格式（或IIFE格式）
  2. 在legacyOutput配置中新增type: 'systemjs'，同时在polyfills列表中新增systemjs: true，插件会自动加载systemjs运行时，再用对应加载规则加载你的legacy代码。

polyfillsLoader({
  modernOutput: {
    name: 'modern',
  },
  // 新增：开启loader的legacy兼容转译
  legacyLoader: true,
  legacyOutput: {
    name: 'legacy',
    test: '!(\'noModule\' in HTMLScriptElement.prototype)',
    // 新增：指定legacy产物的加载类型
    type: 'systemjs'
  },
  polyfills: {
    hash: true,
    coreJs: true,
    regeneratorRuntime: true,
    fetch: true,
    webcomponents: true,
    // 新增：加载systemjs运行时
    systemjs: true,
    custom: [
      {
        name: 'lit-polyfill-support',
        path: 'node_modules/lit/polyfill-support.js',
        test: '!(\'attachShadow\' in Element.prototype)',
        module: false,
      },
    ],
  },
}),

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