[英]Using ES6 features with all browsers support
I want to use ES6 features in my script, and having all browsers support it.我想在我的脚本中使用 ES6 功能,并让所有浏览器都支持它。 How can I do that, and can I?我该怎么做,我可以吗?
I've been thinking about using some tool that will convert my code to ES5 automatically on git pull
ing it on the server, and create the second file out of it.我一直在考虑使用一些工具来将我的代码自动转换为 ES5,在git pull
上将它git pull
服务器上,并从中创建第二个文件。 And then in the browser I could use one of those scripts, depending on the browser and its version.然后在浏览器中,我可以使用这些脚本之一,具体取决于浏览器及其版本。
Is this possible?这可能吗?
It would however create some problems:然而,它会产生一些问题:
What's the best way to do this?做到这一点的最佳方法是什么?
Until more browsers support ES2015 (aka ES6) features, using transpilers and polyfills will be the only way to go.在更多浏览器支持 ES2015(又名 ES6)功能之前,使用转译器和 polyfill 将是唯一的出路。 Checkout the ES6 compatibility table to determine what features you can use today for the browsers your site supports.查看ES6 兼容性表以确定您今天可以为您的站点支持的浏览器使用哪些功能。
Keep in mind that there are two main parts to ES6:请记住,ES6 有两个主要部分:
Until all the browsers your site supports have support for the new ES6 language features, you won't be able to use them in your scripts without first transpiling them to an ES5 equivalent.在您的站点支持的所有浏览器都支持新的 ES6 语言功能之前,您将无法在脚本中使用它们,除非先将它们转换为等效的 ES5。 I've used babel and it has worked great.我用过babel ,效果很好。 The ES5 equivalent code that is generated has performed just fine.生成的 ES5 等效代码执行得很好。 It also beats me trying to write equivalent ES5 code manually.它也击败了我尝试手动编写等效的 ES5 代码。 The code generated by babel has been thoroughly tested by babel's test suite and has been used by thousands of developers around the world. babel 生成的代码已经过 babel 的测试套件的彻底测试,并已被全球数千名开发人员使用。 Also, writing your code with ES6 is shorter and easier to maintain.此外,使用 ES6 编写代码更短且更易于维护。 This saves a lot of developer time.这为开发人员节省了大量时间。 When the day comes that when all the browsers your site supports have support for all the ES6 features, then you can turn off the transpiling step in your build and you'll get the full benefit of native browser performance without having to manually convert your manually written ES5 code to ES6.当您的站点支持的所有浏览器都支持所有 ES6 功能的那一天到来时,您可以关闭构建中的转译步骤,您将获得本机浏览器性能的全部好处,而无需手动转换将 ES5 代码写入 ES6。
Many of the new native API features can be used today by providing a polyfill .许多新的原生 API 功能现在可以通过提供一个polyfill来使用。 The polyfill is only needed when you want to use an ES6 feature AND you need to support older browsers.只有当您想使用 ES6 功能并且需要支持旧浏览器时才需要 polyfill。 With a polyfill, only the older browsers may have slower performance compared to the native implementation.使用 polyfill,与原生实现相比,只有较旧的浏览器的性能可能会降低。 Since most of the modern browsers already support many of the native ES6 API features, many of your users will get the full performance of the browser's native implementation.由于大多数现代浏览器已经支持许多原生 ES6 API 功能,因此您的许多用户将获得浏览器原生实现的全部性能。 From my experience with polyfills, I have not noticed any significant performance implications.根据我使用 polyfill 的经验,我没有注意到任何显着的性能影响。
If you are concerned about modern browsers unnecessarily downloading and running the polyfill all for naught, then there are techniques you can to do minimize the impact:如果你担心现代浏览器不必要地下载和运行polyfill ,那么你可以采取一些技术来最小化影响:
babel used to be able to transpile the ES6 code in your html files, but that feature has been removed. babel曾经能够在您的 html 文件中转译 ES6 代码,但该功能已被删除。 You can just move your embedded code to a separate external JavaScript file.您可以将嵌入的代码移动到单独的外部 JavaScript 文件中。 If you don't like the idea of incurring another request to get this external JavaScript file, then you can do the following:如果您不喜欢引发另一个请求以获取此外部 JavaScript 文件的想法,那么您可以执行以下操作:
@DannyHurlburt's answer was correct at the time of posting it, but now, you can use TypeScript language (with .ts
file extension) to work around this. @DannyHurlburt 的回答在发布时是正确的,但是现在,您可以使用TypeScript语言(带有.ts
文件扩展名)来解决此问题。 TypeScript is a strict superset of JavaScript, so any ES6 code you have is also lexically valid TypeScript. TypeScript 是 JavaScript 的严格超集,因此您拥有的任何 ES6 代码也是词法上有效的 TypeScript。 TS compiles to old versions of JavaScript as old as ES3. TS 编译为与 ES3 一样旧的 JavaScript 旧版本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.