使用本机ES6和需要时透明 [英] Use Native ES6 and Transpiling When Needed

问题描述

有一些方法（使用grunt，gulp，plain JS，节点模块等）来执行以下操作。

以JS文件为输入，构建一系列浏览器特定的文件，基于浏览器目前对ES6功能的支持，并展现了不支持的功能。

我想使用ES6功能在可用的时候都可以使用，并且不能使用ES5。另外，对于那些有兴趣处理旧版浏览器（例如IE9，IE10，很快就成为IE11）的人来说，处理这些浏览器的过程也是如此除了所有我永远写的JS我永远都会需要最终出来的：）。

解决方案

你显然意味着要分开构建不同的浏览器，您可能会根据某种用户代理嗅探服务，或在浏览器端功能检测后动态加载。这听起来很复杂，容易出错。随着新浏览器版本的出现，例如支持胖箭头的Chrome版本，您还需要不断重建浏览器特定的版本。

您要解决的问题是什么？你相信本机实现会更快吗？这是可能的，但不一定如此，如果有差异，它可能是最小的。您是否担心有效载荷大小，因为ES6语法通常更简洁？一旦JS被缩小和压缩，这种差异也可能是微不足道的。我更倾向于在所有浏览器中运行相同的ES5折叠代码，并避免跟踪某些浏览器对特定ES6功能的支持的奇怪错误，您认为这将允许您避免透明化，原来是摇摇欲坠。

我会给你一个具体的例子。假设您决定为节点编译的代码不需要透明的胖箭头，因为您听说该节点支持它们与 - 和谐标志。所以你写

  var foo = {
x：42，
 bar：function（）{setTimeout （）=> console.log（this.x））; } 
}; 
 foo.bar（）; 
  

但是，您会发现该节点不支持 / code>在胖箭头功能：

 >节点--harmony test.js 
<未定义的
  

你不喜欢像babel这样的透明机可靠地将其转换成正确的ES5吗？

  var foo = {
x：42，
g：function g（）{
 var _this = this ; 
 setTimeout（function（）{
 return console.log（_this.x）; 
}）; 
} 
}; 
 
> babel-node test.js 
<一旦你想要支持的所有浏览器都实现了一个特定的ES6功能，那么就可以了大多数透明纸都提供特色功能标志，让您可以将其标示为跳过。
 
 
 
您的提案的修改版本将是两个版本，一个完全折叠，而对于具有完整的ES6支持的浏览器而言，其中一个未被浏览。这将允许您避免在后一种情况下包含transpiler的运行时（如babel的 browser-polyfill.js ）。然而，它也将阻止您利用babel对ES7功能的支持，其中一些功能非常有用，例如异步功能。
 
Is there some way (using grunt, gulp, plain JS, node module, etc.) to do the following.

Taking a JS file as input, build a series of browser specific files based upon the browser's current support of ES6 features and transpile the features that are not yet supported.

I'd like to use the ES6 features that are available as they become available and transpile the ones that aren't to ES5. 

Also, for those of us that have the pleasure of dealing with older browsers (e.g. IE9, IE10, and soon to be IE11) some sort of process of dealing with them other than transpiling all JS I write forever will need to come out eventually :).
解决方案
You apparently mean to have separate builds for different browsers, which you will presumably serve up depending on some kind of user agent sniffing, or dynamically load after browser-side feature detection. That sounds complicated and error-prone. You'll also need to constantly rebuild your browser-specific versions as new browser versions come out, such as a version of Chrome that supports fat arrow. 

What is the problem you are trying to solve? Do you believe that the native implementations will be faster? That's possible, but not necessarily the case, and if there is a difference it is likely to be minimal. Are you worried about payload size, since ES6 syntax is often more succinct? That difference is also likely to be negligible once JS is minified and zipped. I'd much rather have the same ES5 transpiled code running in all browsers, and avoid having to track down weird bugs where a certain browser's support of a certain ES6 feature, which you thought would allow you to avoid transpiling, turns out to be shaky.

I'll give you a concrete example. Let's say you decide that the code you compile for node does not need to transpile fat arrows, since you heard that node supports them with the --harmony flag. So you write
var foo = {
  x: 42,
  bar: function() { setTimeout(() => console.log(this.x)); }
};  
foo.bar();
But then you find out that node does not support the lexicalization of this in fat arrow functions:
> node --harmony test.js
< undefined
Wouldn't you rather have a transpiler like babel reliably transpile this into correct ES5?
var foo = {
  x: 42,
  g: function g() {
    var _this = this;
    setTimeout(function () {
      return console.log(_this.x);
    });
  }
};

> babel-node test.js
< 42
Once you are comfortable that all the browsers you want to support have implemented a particular ES6 feature, then most transpilers provide feature-by-feature flags that allow you to tell it to skip it.

A modified version of your proposal would be to have two builds, one fully transpiled, and one non-transpiled for browsers with complete ES6 support. That would allow you to avoid having to include the transpiler's runtime (such as babel's browser-polyfill.js) in the latter case. However, it would also prevent you from taking advantage of babel's support of ES7 features, some of which are very useful, such as async functions.

                        
这篇关于使用本机ES6和需要时透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！