在所有浏览器中使用ES6功能支持

Question

我想在我的脚本中使用ES6功能，并让所有浏览器都支持它。我怎么能这样做，我可以吗？

我一直在考虑使用一些工具将我的代码自动转换为ES5 git pull在服务器上，并创建第二个文件。然后在浏览器中我可以使用其中一个脚本，具体取决于浏览器及其版本。

这可能吗？

然而，这会产生一些问题：

1. 转换后的代码与编写代码具有相同的性能 在ES5本地。
2. 我必须在HTML中编写某种if，我想 只包含一个脚本，没有任何其他内容。

最好的方法是什么？

Answer 1

在更多浏览器支持ES2015（又名ES6）功能之前，使用转发器和polyfill将是唯一的方法。结帐the ES6 compatibility table以确定您的网站支持的浏览器目前可以使用哪些功能。

请记住，ES6有两个主要部分：

1. 新语言功能
2. 新的原生API功能

直到所有您的网站支持的浏览器都支持新的ES6语言功能，如果没有先将它们转换为ES5等效项，您将无法在脚本中使用它们。我使用过babel，效果很好。生成的ES5等效代码执行得很好。它也让我想要手动编写等效的ES5代码。 babel生成的代码已经过babel测试套件的全面测试，并已被全球数千名开发人员使用。此外，使用ES6编写代码更短，更易于维护。这节省了大量的开发人员时间。当您的网站支持的所有浏览器都支持所有ES6功能的那一天，您可以关闭构建中的转换步骤，您将获得本机浏览器性能的全部好处，而无需手动转换您的手动将ES5代码写入ES6。

现在可以通过提供polyfill来使用许多新的本机API功能。只有当您想要使用ES6功能时才需要填充 AND ，您需要支持旧浏览器。对于polyfill，仅旧版浏览器的性能可能比本机实现慢。由于大多数现代浏览器已经支持许多本机ES6 API功能，因此您的许多用户将获得浏览器本机实现的全部性能。根据我对polyfills的经验，我没有发现任何重大的性能影响。

如果您担心现代浏览器不必要地下载和运行polyfill一无所获，那么您可以采用一些技术来最大限度地减少影响。 1）在服务器端，您可以检测发出请求的浏览器，并确定是否要在响应中发送polyfill脚本标记。 2）您可以正确地对polyfill进行版本设置并确保设置Web服务器的缓存，以便浏览器在初始下载后很少会请求polyfill。

babel曾经能够在您的html文件中转换ES6代码，但该功能已被删除。您只需将嵌入式代码移动到单独的外部JavaScript文件即可。如果您不喜欢另外请求获取此外部JavaScript文件的想法，则可以执行以下操作：1）将ES6代码写入单独的文件中。 2）通过babel运行此文件3）使用服务器端脚本语言直接在HTML中包含已转换的内容。

Answer 2

@DannyHurlburt 的回答在发布时是正确的，但现在，您可以使用 TypeScript 语言（带有 .ts 文件扩展名）来解决此问题。 TypeScript 是 JavaScript 的严格超集，因此您拥有的任何 ES6 代码也是词法上有效的 TypeScript。 TS 编译为旧版本的 JavaScript，如 ES3。