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

Using ES6 features with all browsers support

本文关键字：ES6 功能 支持下 浏览器      更新时间：2023-09-26

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

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

这可能吗？

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

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

最好的方法是什么？

在更多浏览器支持ES2015（又名ES6）功能之前，使用transpilers和polyfill将是唯一的选择。检查ES6兼容性表，以确定您的网站支持的浏览器目前可以使用哪些功能。

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

  1. 新的语言功能
  2. 新增本机API功能

在您的网站支持的所有浏览器都支持新的ES6语言功能之前，如果不首先将它们转换为等效的ES5，您将无法在脚本中使用它们。我用过babel，效果很好。生成的ES5等效代码执行得很好。这也让我无法手动编写等效的ES5代码。babel生成的代码已经通过babel的测试套件进行了彻底的测试，并被世界各地成千上万的开发人员使用。此外，使用ES6编写代码更短，更易于维护。这为开发人员节省了大量时间。当你的网站支持的所有浏览器都支持所有ES6功能时，你就可以关闭构建中的transpiling步骤，你将获得本机浏览器性能的全部好处，而无需手动将手动编写的ES5代码转换为ES6。

今天，许多新的原生API特性都可以通过提供polyfill来使用。只有当您想使用ES6功能并且需要支持较旧的浏览器时，才需要polyfill。对于polyfill，仅与本机实现相比，较旧的浏览器可能具有较慢的性能。由于大多数现代浏览器已经支持许多本机ES6 API功能，因此许多用户将获得浏览器本机实现的全部性能。根据我使用polyfill的经验，我没有注意到任何显著的性能影响。

如果你担心现代浏览器不必要地下载和运行polyfill，那么有一些技术可以将影响降至最低：

  1. 在服务器端，您可以检测发出请求的浏览器，并确定是否需要在响应中发送polyfill脚本标记
  2. 您可以正确地对polyfill进行版本设置，并确保设置了web服务器的缓存，这样浏览器在首次下载后很少会请求polyfill

babel过去可以在html文件中转换ES6代码，但该功能已被删除。您可以将嵌入的代码移动到一个单独的外部JavaScript文件中。如果你不喜欢引起另一个请求来获取这个外部JavaScript文件的想法，那么你可以执行以下操作：

  1. 在一个单独的文件中编写ES6代码
  2. 通过babel运行此文件
  3. 使用服务器端脚本语言将转换后的内容直接包含在HTML中

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

相关文章：