如何在 Firefox 和 Chrome 中使用 'let'（以及支持的 ECMAScript 6 功能）

Question

ES6 脚本使用 let 运行s，如预期在最新的 Chrome 稳定版中，如果它在 "use strict" 定义中。如果使用具有特殊类型的脚本标签加载，它运行在 Firefox 中没问题：

<script type="application/javascript;version=1.7" src=""></script>

但是具有该特殊类型的文件现在不会运行在 Chrome 中！在 Chrome 中没有脚本运行s：静默失败，没有控制台消息。什么是跨浏览器解决方案？（我想知道这是否可以在不转译的情况下完成。）

Answer 1

假设您可以控制脚本本身，最简单的解决方案是在脚本中设置一些全局变量并稍后检查它是否存在。如果没有，请将此脚本元素替换为没有特殊 MIME 类型的元素，以便它可以在其他浏览器上运行。之后可以安全地忽略全局。

<script type="application/javascript;version=1.7">
  'use strict';
  window.fx = true;

  let foo = 'bar';
  console.log(foo);
</script>
<script>
  if (typeof window.fx === 'undefined') {
    var oldScript = document.querySelector('script[type="application/javascript;version=1.7"]');
    var text = oldScript.text;
    document.body.removeChild(oldScript);

    var newScript = document.createElement('script');
    newScript.text = text;
    document.body.appendChild(newScript);
  }
</script>

此处的主要缺点是引用外部脚本时可能会产生额外的 HTTP 请求，尤其是在未缓存脚本的情况下。由于 Firefox 是 唯一的 浏览器，您可以保证在每次加载页面时不会多次请求脚本，这在其他浏览器上可能会造成极大的浪费。

作为替代方案，您可以使用评论中提到的特征检测来插入带有或不带有 type 属性的 script 元素，而不是将其包含在 HTML 中来源开始。根据 MDN's compatibility table，基本支持从 Firefox 2.0（在 JavaScript 1.7 中）开始可用，因此您可以从您希望扩展支持的任何版本中选择几乎任何 Firefox 特定的功能。

var script = document.createElement('script');
script.text = '"use strict"; let foo = "bar"; console.log(foo);';

try {
  document.querySelector('::-moz-selection');
  script.type = 'application/javascript;version=1.7';
} catch (e) {
  // Not Firefox, leave MIME type unchanged
}

document.body.appendChild(script);

如何在 Firefox 和 Chrome 中使用 'let'（以及支持的 ECMAScript 6 功能）

How to use 'let' (and supported ECMAScript 6 features) in both Firefox and Chrome

javascript

firefox

google-chrome

ecmascript-6