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 Extensions
Chrome擴展程序
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.

?? 喜歡你讀的書？ 當我寫新東西時，請跟隨我以得到通知。