显然,您的意思是为不同的浏览器进行单独的构建,您可能会根据某种用户代理嗅探来提供这些构建,或者在浏览器端功能检测后动态加载。这听起来很复杂而且容易出错。随着新浏览器版本的出现,您还需要不断重建特定于浏览器的版本,例如支持 fat arrow 的 Chrome 版本。
您想要解决的问题是什么?您相信本机实现会更快吗?这是可能的,但不一定是这样,即使有差异,也可能很小。由于 ES6 语法通常更简洁,您是否担心有效负载大小?一旦 JS 被缩小和压缩,这种差异也可能可以忽略不计。我更愿意在所有浏览器中运行相同的 ES5 转译代码,并避免必须追踪奇怪的错误,即某个浏览器对某个 ES6 功能的支持,你认为可以让你避免转译,结果却是不稳定的。
我给你举一个具体的例子。假设您决定为节点编译的代码不需要转译粗箭头,因为您听说节点支持它们--harmony
旗帜。所以你写
var foo = {
x: 42,
bar: function() { setTimeout(() => console.log(this.x)); }
};
foo.bar();
但后来你发现节点不支持词法化this
在胖箭头函数中:
> node --harmony test.js
< undefined
难道你不想让像 babel 这样的转译器可靠地将其转译成正确的 ES5 吗?
var foo = {
x: 42,
g: function g() {
var _this = this;
setTimeout(function () {
return console.log(_this.x);
});
}
};
> babel-node test.js
< 42
一旦您确信您想要支持的所有浏览器都实现了特定的 ES6 功能,那么大多数转译器都会提供逐个功能的标志,允许您告诉它跳过它。
您的提案的修改版本是有两个版本,一个是完全转译的,另一个是针对具有完整 ES6 支持的浏览器的非转译版本。这将使您避免必须包含转译器的运行时(例如 babel 的browser-polyfill.js
) 在后一种情况下。但是,它也会阻止您利用 babel 对 ES7 功能的支持,其中一些功能非常有用,例如异步函数。