检查 Angular 项目中浏览器可选链支持

Question

在 Angular 应用程序中，我想检查客户端浏览器对可选链接 (es2020) 的本机支持，以便加载具有现代 ES 版本和旧版本的库。

问题是：Angular 编译器（我相信它实际上是 tsc 属行为）将所有内容转换为目标 ES 版本（在我的例子中是 es6），破坏了我用来检查可选链支持的代码（破坏的意思是它不会'无法在运行时检查可选链支持）：

export function isOpChainingSupported(): boolean {
  const opChainingChecker = {
    support: true
  };
  try {
    // CODE BEFORE TRANSPILING:
    // return opChainingChecker?.support;
    //
    // TURNS INTO
    return
      opChainingChecker === null || opChainingChecker === void 0 ? 
      void 0 :
      opChainingChecker.support;
  } catch {
    return false;
  }
}

我尝试将此代码移动到纯 JS 文件中的函数，使用“allowJs”TS 配置以便导入它而不会出现错误...不行：tsc 最终也会转译它。

现在我可以看到三个我不太喜欢的选项：

• 使用 eval('constObj?.prop')，根据我出于安全原因检查过的大多数来源，这不是一个好的选择；
• 使用我的纯JS文件作为资产，动态加载它；
• 为此函数创建一个 ES 实用程序库（我现在的选择，尽管我认为它对我的问题来说有点矫枉过正）。

我想问的是：有什么我没有看到的吗？我错过了一个更简单的解决方案？

提前抱歉，如果这是一个不好的问题，但我觉得当我们对问题“修补”太多时，最好询问对图片有新看法的人！

干杯！

Answer 1

由于我已经选择了问题中描述的选项之一，所以我认为回答它会很好。

在我的第一次尝试中，我尝试了“第三方库”解决方案，但它不起作用：当出现语法错误时（如果我们在不支持的浏览器中使用可选链接就是这种情况），就会发生异常在浏览器实际运行该代码之前，会产生两个结果：

• 异常不会被 try/catch 块捕获；
• 当前的“执行上下文”将突然结束。

因此，我需要一种在单独的上下文中运行“检查器代码”的方法，以防止我的主线程（以及我的应用程序）死亡。另外，我需要一种方法来检查代码是否成功运行。

我提出的最终解决方案是两个选项的混合：我创建了一个库，它加载一个简单的脚本测试可选链支持，返回一个带有指示浏览器支持的布尔值的 Promise。

通过添加临时脚本标签（将执行与主上下文隔离，防止 SyntaxError 终止应用程序），动态加载脚本。为了提高安全性，我使用了integrity属性。

如果有人遇到同样的问题，您可以通过安装 npm 库 optional-chaining-checker 并按照说明使用我的解决方案。我已尽力使其可定制，但如果它不能满足您的需求，请随时查看我的存储库并随意调整代码！

Answer 2

对我有用的唯一解决方案是在标头中添加脚本标记，然后保护全局变量

<script>
  let a = {};
  a?.a?.a;
  var supportsOpChaining = true;
</script>

然后

if (typeof supportsOpChaining !== "undefined"){
  // The code that uses optional chaining
}
else {
  // The code that not using optional chaining
}

（我将“unsafe-eval”添加到我的网站标题中，因此我无法使用 eval） 我测试了 npm 库，但它不起作用