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

Question

使用let 的ES6 脚本如果在"use strict" 定义中，则可以在最新的Chrome 稳定版中按预期运行。如果使用特殊类型的脚本标签加载它，它在 Firefox 中运行良好：

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

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

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 是唯一的浏览器，您可以保证每次页面加载时不会多次请求脚本，这可能会在其他浏览器上造成难以置信的浪费。

作为替代方案，您可以使用 cmets 中提到的特征检测来插入带有或不带有 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);