使用原生 ES6 并在需要时进行转译

2024-01-30

有什么方法(使用 grunt、gulp、plain JS、node 模块等)来执行以下操作。

以 JS 文件作为输入,根据浏览器当前对 ES6 功能的支持构建一系列浏览器特定文件,并对尚不支持的功能进行转译。

我想使用可用的 ES6 功能,并将那些不可用的功能转译为 ES5。

另外,对于我们这些乐于处理旧浏览器(例如 IE9、IE10 和即将成为 IE11)的人来说,除了转译我永远编写的所有 JS 之外,最终还需要某种处理它们的过程: )。


显然,您的意思是为不同的浏览器进行单独的构建,您可能会根据某种用户代理嗅探来提供这些构建,或者在浏览器端功能检测后动态加载。这听起来很复杂而且容易出错。随着新浏览器版本的出现,您还需要不断重建特定于浏览器的版本,例如支持 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 功能的支持,其中一些功能非常有用,例如异步函数。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用原生 ES6 并在需要时进行转译 的相关文章

随机推荐