在所有浏览器支持下使用 ES6 特性

Question

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

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

这可能吗？

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

1. 转换后的代码与在 ES5 中原生编写代码具有相同的性能。
2. 我将不得不在 HTML 中编写某种 if，并且我只想包含一个脚本，而没有其他任何内容。

做到这一点的最佳方法是什么？

Answer 1

在更多浏览器支持 ES2015（又名 ES6）功能之前，使用转译器和 polyfill 将是唯一的出路。 查看ES6 兼容性表以确定您今天可以为您的站点支持的浏览器使用哪些功能。

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

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

在您的站点支持的所有浏览器都支持新的 ES6 语言功能之前，您将无法在脚本中使用它们，除非先将它们转换为等效的 ES5。 我用过babel ，效果很好。 生成的 ES5 等效代码执行得很好。 它也击败了我尝试手动编写等效的 ES5 代码。 babel 生成的代码已经过 babel 的测试套件的彻底测试，并已被全球数千名开发人员使用。 此外，使用 ES6 编写代码更短且更易于维护。 这为开发人员节省了大量时间。 当您的站点支持的所有浏览器都支持所有 ES6 功能的那一天到来时，您可以关闭构建中的转译步骤，您将获得本机浏览器性能的全部好处，而无需手动转换将 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 中。

Answer 2

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