by Alex Ewerlöf

由AlexEwerlöf

您可能不需要翻译您JavaScript (You might not need to transpile your JavaScript)

Popular guides like YouMightNotNeedJQuery.com and You Don’t Need Lodash/Underscore have challenged common industry practices.

诸如YouMightNotNeedJQuery.com和“ 您不需要Lodash / Undercore”这样的流行指南已经挑战了常见的行业惯例。

This post is not as wild as, say, YouMightNotNeedJS.com, but it does elaborate on transpilation, and explains why it may not be as necessary in the near future.

这篇文章并不像YouMightNotNeedJS.com那样疯狂 ，但它确实详细介绍了转译，并解释了为什么在不久的将来可能没有必要。

StatCounter gathers data about 15+ billion page views every month from 2.5 million websites around the globe. As of May 2017, this is the status quo:

StatCounter每月从全球 250万个网站中收集约15+十亿页面浏览量的数据。 截至2017年5月，现状为：

The thing that makes this diagram interesting is that the top 3 browsers (Chrome, Safari and FireFox) are evergreen, which means 74% of users get the latest version of their browser automatically.

使该图有趣的是，排名前3位的浏览器(Chrome，Safari和FireFox)都是常绿的 ， 这意味着74％的用户会自动获得其浏览器的最新版本。

Let’s see whether this assumption is correct.

让我们看看这个假设是否正确。

Here are the top browser versions in the market:

以下是市场上最受欢迎的浏览器版本：

Chrome 58 was released less than a month ago and its desktop version holds 12.77% of the global browser market share. Chrome 57 was release just 42 days before that and its desktop version holds 9.96% of the global browser market. Unfortunately StatCounter doesn’t differentiate between chrome versions on mobile platforms but assuming the same ratio as desktop we end up with:

Chrome 58 发布不到一个月前，其台式机版本占据了全球浏览器市场份额的12.77％。 Chrome 57才发布了42天，其台式机版本占据了全球浏览器市场的9.96％。 不幸的是，StatCounter并未区分移动平台上的chrome版本，但假设与台式机的比例相同，最终得出：

这对我的代码意味着什么？ (What does it mean for my code?)

According to ES Compatibility Table the latest version of all major browsers have a very good support for ES6 features:

根据ES兼容性表 ，所有主要浏览器的最新版本都对ES6功能具有很好的支持：

In other words if you’re transpiling your JavaScript to ES5, you’re making your code unnecessarily big and slow to support a minority of the users who will probably upgrade their system by the time you manage to configure your Webpack and Babel! ?

换句话说，如果将JavaScript移植到ES5，则会不必要地使代码变大和变慢，以支持少数用户，他们可能会在设法配置Webpack和Babel时升级其系统！ ？

你为什么仍然要转运？ (Why would you still transpile?)

You may still want to transpile your code but hopefully after weighing cons and pros or possible alternatives:

您可能仍然想转译代码，但希望在权衡利弊或可能的选择之后：

• You’re using React JSX (which is pretty popular at the moment so I’m assuming lots of developers fit into this category). JSX at its core is a transformation of XHTML to JS code and doesn’t necessary need a full transpiler like Babel. Besides, if all you need is VirtualDom, use that instead.

  您正在使用React JSX(目前非常流行，因此我假设很多开发人员都属于此类)。 JSX的核心是将 XHTML 转换为JS代码，并且不需要像Babel这样的完整编译器。 此外，如果您需要的只是VirtualDom ，请改用它。

• You want to try the latest features of the language. Unless you’re part of TC39 or have a burning desire for injecting unstable language features into your production code, you’re probably fine with ES6. Nowadays we have a decent language is the majority of the browsers and the need to transpile are fading away.您想尝试该语言的最新功能。 除非您是TC39的一部分，或者强烈希望将不稳定的语言功能注入您的生产代码中，否则使用ES6可能会很好。 如今，大多数浏览器都拥有一种不错的语言，并且对转换的需求正在逐渐消失。

• You’re using TypeScript and hopefully weighed the cons and pros. TypeScript compiler, when targetting a modern version of ES6 mostly strips out the type information rather than transforming syntax.

  您正在使用TypeScript，并希望权衡利弊 。 当针对现代版本的ES6时，TypeScript编译器主要去除类型信息，而不是转换语法。

• You wanna reduce code size using tree shaking (here’s is how to do it in webpack and rollup). You want to obfuscate your code or reduce its size by minification. You want to conditionally exclude part of the code. This requires static code analysis. You can use a smart bundler for size-sensitive production services like Mobile devices, but we’re gonna see more careful cost assessments when creating such alternative deployments. These sorts of static code analysis will continue to be useful as “advanced optimization techniques” for production code.You don’t have to minify your files. UglifyJS can’t minify ES6 at the moment (though a harmoney branch exists) but Babili can deal with it. The compression algorithms do a pretty decent job (not when the files are too little) and unless you’re shipping an operating system in every page load, it should do fine without compression. These days images and multimedia content take much more bandwidth than the code.

  您想通过摇树来减少代码大小(这是在webpack和rollup中的方法 )。 您想混淆代码或缩小代码大小。 您想有条件地排除部分代码。 这需要静态代码分析。 您可以将智能捆绑器用于大小敏感的生产服务(例如移动设备)，但在创建此类替代部署时，我们会进行更仔细的成本评估。 这些静态代码分析将继续用作生产代码的“高级优化技术”。 你不必来缩小你的文件。 UglifyJS目前无法缩小ES6(尽管存在和谐分支)，但是Babili可以处理它。 压缩算法做得不错( 不是文件太少的话 )，除非您在每次页面加载时都交付了操作系统，否则无需压缩就可以正常工作。 如今，图像和多媒体内容占用的带宽远远超过代码。

• You want the elephant in the room:您想要房间里的大象：

NPM is the largest package manager on the planet. Most non-trivial web applications use some code from NPM and that implies using a module bundler. That is soon gonna change! Chrome already supports ES6 modules in Canary (Chrome 60 will officially ship this feature this August) and Safari is close to ship it too while Firefox and Edge are working on it.

NPM是地球上最大的包裹管理器。 大多数非平凡的Web应用程序都使用NPM中的一些代码，这意味着使用模块捆绑器。 那很快就会改变！ Chrome已经在Canary中支持ES6模块(Chrome 60将于今年8月正式发布此功能)，而Firefox和Edge正在开发中时，Safari也即将发布 。

Besides HTTP/2 allows voluntarily pushing resources to the browser. That means if a.js is importing b.js and c.js, the server can push b.js and c.js every time a.js is fetched which minimizes the time between requests. This is of course a simplified view because in practice browser might already have b.js and c.js in its cache. HTTP/2 is supported in the majority of browsers.

此外， HTTP / 2允许自愿将资源推送到浏览器。 如果手段a.js是进口b.js和c.js，服务器可以推b.js和c.js每次a.js是获取最大限度地减少请求之间的时间。 这当然是简化视图，因为在实践中浏览器可能已经在其缓存中包含b.js和c.js。 大多数浏览器都支持 HTTP / 2。

没有移植的未来 (The future without Transpilation)

Considering the statistics above, this means 2018 will be the year the majority of the web apps can get rid of the module bundlers or transpilers.

考虑到以上统计数据，这意味着2018年将是大多数Web应用程序可以摆脱模块捆绑器或编译器的一年。

Transpilation is a workaround. We might have done it for too long that we got used to it, but think about it. We are “compiling” an “interpreted” language to an “interpreted” language! Besides:

转译是一种解决方法。 我们可能已经习惯了太久了，但是请考虑一下。 我们正在将“解释”语言“编译”为“解释”语言！ 除了：

• Configuring Webpack/Browserify is an unnecessary tax in many cases在许多情况下，配置Webpack / Browserify是不必要的负担

• Debugging using sourcemaps is always harder than debugging the actual script being run (anyone had fun trying to debug this or variables when sourcemaps don’t work properly?)

  使用sourcemap进行调试总是比调试正在运行的实际脚本困难(当sourcemap无法正常工作时，有人会尝试调试this变量或变量吗？)

• It kills the DX when you have to wait a few seconds (sometimes half a minute) after each edit to see the latest code. Hot Module Reloading (HMR) is an answer to that but it’s not always smooth and quick to configure. Without transpilation, all you have to do is to refresh the page and in less than a second your latest page is there!当您每次编辑后必须等待几秒钟(有时是半分钟)以查看最新代码时，它将杀死DX。 Hot Module Reloading(HMR)可以解决此问题，但配置并不总是那么平稳和快速。 如果不进行编译，您要做的就是刷新页面，并且不到一秒钟的时间便可以看到最新页面！

This August when ES6 modules are shipped, some types of applications will not use transpilation at all:

ES8模块在今年8月交付时，某些类型的应用程序将完全不使用转译：

• Chrome ExtensionsChrome扩展程序
• Electron desktop applications电子桌面应用
• B2B web apps that are made to be run by business users who already have good gears provided by the company由商业用户运行的B2B Web应用程序，这些用户已经拥有公司提供的良好设备

When transpilation becomes a thing of the past, libraries with Hyperscript syntax will bring the ideas of React to POJS (Plain Old JavaScript that is not transpiled and easily debuggable on the console).

当转译成为过去时， 具有Hyperscript语法的库将把 React的思想带入POJS (未转译且可在控制台上轻松调试的纯旧JavaScript)。

不要编译，而是真正编译！ (Don’t transpile, but compile for real!)

WASM is the new kid in town and it’s the official compilation target that promises faster execution speed and smaller code size. Currently Chrome and Firefox support WASM but there’s a good consensus among the big browser vendors that WASM is going to be the common run-time of the future. If you got Chrome, you can give it a try.

WASM是一个新手，它是官方的编译目标，它保证更快的执行速度和更小的代码大小 。 目前， Chrome和Firefox支持WASM，但是大型浏览器供应商之间已经达成了一个很好的共识，即WASM将成为未来的常见运行时间。 如果您有Chrome，可以尝试一下 。

If you’re the kind of developer who itches for something new, take a look at Rust. It compiles to WASM but isn’t limited to web. People actually use it to write operating system or browser engine. Besides old time C/C++ developers approve and like it and it has a very welcoming community.

如果您是那种渴望新事物的开发人员，请查看Rust 。 它可以编译成WASM，但不仅限于Web。 人们实际上使用它来编写操作系统或浏览器引擎 。 除了旧的C / C ++开发人员认可和喜欢外 ，它还有一个非常受欢迎的社区。

一些注意事项 (A few notes)

• According to former Mozilla CTO Chrome won and it’s unlikely that there’s going to be another browser war. The interesting thing is that Chrome won it with meritocracy. It’s open source and Google has clearly defined what information it is gathering from the users. Chrome wins even the business users which traditionally use Windows. Nevertheless, while the end users choose Chrome because of its speed, security and simplicity, programmers love its developer tools. Google have an active role in the TC39 which drives the future of JavaScript and in general is the strongest proponent of the web platform even though it may compete with its own mobile OS. Not only that, but Google also helps its competitors. Google has been one of the biggest financial supporters of Mozilla and its rendering engine is used by Opera.

  据前Mozilla CTO Chrome获胜 ，而且不太可能再发生浏览器大战。 有趣的是， Chrome以优异的表现赢得了胜利 。 它是开源的，Google已明确定义了它从用户那里收集的信息。 Chrome 甚至赢得了传统上使用Windows 的企业用户的青睐。 不过，尽管最终用户选择Chrome是因为它的速度，安全性和简便性，但程序员喜欢它的开发人员工具。 Google在TC39中扮演着积极的角色，TC39驱动着JavaScript的未来，尽管它可能与自己的移动操作系统竞争，但它是Web平台的最强支持者。 不仅如此，Google还可以帮助其竞争对手。 Google一直是Mozilla的最大财务支持者之一，其渲染引擎供Opera使用。

• Microsoft officially dropped support for IE about 17 months ago. IE 11 will continue to receive security updates until 2025, but it’s up to you to decide on spending significant resources to support a browser that only 3.24% of the market uses. Also keep in mind that Edge is the default browser in Windows 10. If anyone doesn’t want to upgrade their Windows to the latest version, the recent WannaCrypt attack probably gives them a reason to reconsider! I’m personally interested to any market research on the revenue coming from this particular customer segment.

  大约17个月前， 微软正式放弃了对IE的支持。 IE 11将继续收到安全更新，直到2025年，但是要由您决定花费大量资源来支持仅3.24％的市场使用的浏览器。 还要记住，Edge是Windows 10中的默认浏览器。如果有人不想将Windows升级到最新版本，则最近的WannaCrypt攻击可能使他们有理由重新考虑！ 我个人对来自该特定客户群的收入的任何市场研究都感兴趣。

• Apple put a set of unfair restrictions to keep the other browser vendors out of their iOS platform. So for example Chrome on iOS is technically limited to parts of Safari engine! Safari used to be the new IE, until back in 2016 they did a good job and became the browser with the best ES6 support:

  苹果公司设置了一系列不公平的限制，以使其他浏览器供应商脱离其iOS平台。 因此，例如，iOS上的Chrome在技术上仅限于Safari引擎的一部分！ Safari 曾经是新的IE ，直到2016年，他们才干得不错，并成为具有最佳ES6支持的浏览器：

Overall the global share of iOS/Safari is less than Android/Chrome. It varies by country, for example in richer countries iOS has a bit higher penetration while in the developing world Android is the absolute winner but globally here are the stats:

总体而言，iOS / Safari的全球份额少于Android / Chrome。 具体情况因国家/地区而异，例如在较富裕的国家/地区，iOS的普及率要高一些，而在发展中国家，Android是绝对的赢家，但在全球范围内，以下是统计数据：

呼吁采取行动！ (Call to Action!)

If you’re old enough, you probably may remember the annoying days when some websites forced (or politely suggested) their browser of choice (mostly IE):

如果年龄足够大，您可能会记得一些网站强迫(或礼貌地建议)他们选择的浏览器(主要是IE)的烦人日子：

We don’t wanna do that! No matter how excited we are about Chrome, we don’t want to ignore 46% of the web traffic not being rendered by Chrome.

我们不想这样做！ 不管我们对Chrome多么兴奋，我们都不想忽略46％的Chrome无法提供的网络流量。

Just because we might have support for ES6 modules in browsers soon, it doesn’t mean that we can get rid of a build process and a proper “bundle strategy”. — Stefan Judis

仅仅因为我们即将在浏览器中支持ES6模块，并不意味着我们可以摆脱构建过程和适当的“捆绑策略”。 — 斯蒂芬·朱迪斯 ( Stefan Judis)

We’ll always have people stuck with an old browser in their TV firmware or car infotainment system. We’ll always have that stubborn grandpa who doesn’t see the need to invest in upgrading his machine only to leave it as a legacy. Kids will continue using their parent’s old iPhone or tablet and 1 laptop per child will not grow some processing power over night. We don’t want to lock anyone out.

我们总是会让人们在他们的电视固件或汽车信息娱乐系统中使用旧的浏览器。 我们将永远拥有那个强的爷爷，他不认为需要投资升级他的机器，而只是将其保留为遗产。 孩子们将继续使用其父母的旧iPhone或平板电脑，每个孩子一台笔记本电脑将不会在晚上增加处理能力。 我们不想将任何人拒之门外。

This is not a new problem though. Despite ES6 being one of the biggest changes in the web, graceful degradation can still provide some use for the minority while keeping the development costs under control for the majority.

不过，这不是一个新问题。 尽管ES6是Web上最大的更改之一，但正常降级仍可以为少数族裔提供一些使用，同时使多数族裔的开发成本得到控制。

In a future post I’ll discuss the practical side of how to ship modern code while having a backup plan for graceful degradation. You can follow me on Twitter or Medium to stay tuned.

在以后的文章中，我将讨论如何交付现代代码同时又有一个适当的降级备份计划的实践方面。 您可以在Twitter或Medium上关注我，以保持关注。

BONUS: Take a look at JS Codeshift. It is a CLI for converting old javascript code to new javascript code updating even old javascript library calls to their latest API. It tries to preserve as much as the original styling as possible. Workflow: after committing your changes to version control, run this and do a thorough comparison and run the automated & manual tests. Done!

奖励 ：看一下JS Codeshift 。 它是一个CLI，用于将旧的javascript代码转换为新的javascript代码，甚至将旧的javascript库调用更新为它们的最新API。 它尝试保留尽可能多的原始样式。 工作流程：将更改提交到版本控制后，请运行此程序并进行彻底的比较，然后运行自动和手动测试。 做完了！

Update 1 (2017–09–8): Chrome 61 landed a few days ago with full ES6 module support. It has 54% of global browser market. Safari (14% of global market) has supported ES6 modules for a while.

更新1(2017–09–8)： Chrome 61几天前登陆，全面支持ES6模块。 它拥有全球浏览器市场的54％。 Safari(占全球市场的14％)支持ES6模块已有一段时间了。

Update 2 (2017–09–10): you can still support browsers which don’t support ES6 modules thanks to this trick <script nomodule src=”compiled.js”><;/script>. The nomodule attribute tells the browsers with ES6 module support not to load the script. On Safari there are some caveats that you can read in the page that talks about the trick. Read the spec.

更新2(2017–09–10)：由于此技巧 < scri pt nomod ule src =” compiled.js”> < ; / scri pt>，您仍然可以支持不支持ES6模块的浏览器。 nomodule属性告诉具有ES6模块支持的浏览器不要加载脚本。 在Safari上，您可以在有关此技巧的页面上阅读一些警告。 [R EAD规范。

Update 3 (2017–09–12): ES6 modules support lands in browsers: is it time to rethink bundling?

更新3(2017–09–12)： ES6模块支持浏览器中的区域：是时候重新考虑捆绑了吗？

Update 4 (2017–09–12): module are deferred by default. If you want to bypass that, add an async attribute to the script tag to prevent Single Point Of Failure (SPOF).

更新4(2017–09–12)：默认情况下，模块延迟为红色。 如果要绕过它，请在脚本标签中添加async属性，以防止出现单点故障(SPOF) 。

Update 5 (2017–09–13): Node LTS 8.5 supports ES6 Modules (called ESM) behind a flag when the file has a *.msj extention. Here’s a nice intro about how they’re used.

更新5(2017–09–13)：当文件具有* .msj扩展名时，节点LTS 8.5在标记后支持ES6模块 (称为ESM)。 这是一个很好的介绍它们的用法。

Update 6 (2017-09–22): here is some great practical advice for supporting both new and old browsers. The bandwidth savings for avoiding transpilation is great!

更新6(2017-09–22)： 这是一些同时支持新旧浏览器的实用建议。 节省的带宽避免了代码转换！

Update 7 (2018–01–15): Lebab (the reverse of Babel) is has a CLI for modernizing old-style Javascript. This is a bit similar to Facebook’s CodeShift because they both modernize old code.

更新7(2018-01-15)： Lebab (Babel的反面)具有用于更新旧式Javascript的CLI。 这有点类似于Facebook的CodeShift，因为它们都使旧代码现代化。

The most widely deployed bug in the history of computing opened up a great opportunity for us! Read Why we should convince our users to update their browsers?

计算历史上部署最广泛的错误为我们带来了巨大的机会！ 阅读为什么我们应该说服用户更新他们的浏览器？

⚡️Liked what you read? Follow me to be notified when I write something new.

⚡️ 喜欢你读的书？ 当我写新东西时，请跟随我以得到通知。

翻译自: https://www.freecodecamp.org/news/you-might-not-need-to-transpile-your-javascript-4d5e0a438ca/