在生产环境配置ES2015+代码

摘要 :支持浏览器兼容ES2015+,提高用户体验

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

大多数web开发者使用JavaScript时喜欢使用最新的语言特性,比如:async、await、classes、箭头函数等。可是,尽管实际上现在所有最新版浏览器都能运行ES2015+代码并且支持我提到的这些特性,但开发者仍然使用polyfills将代码编译成ES5语法并打包,以便那些还在使用低版本浏览器的用户能够正常使用。

这点是很糟糕的。在理想情况下,我们无需传送不必要的代码。

用最新的JavaScript和DOM APIs,我们可以根据需求加载ployfills,因为我们可以在运行时使用特性检测它们的支持是否支持这些语法。但是随着一些新的JavaScript语法出现,,因为任何未知的语法都会导致解析错误,然后导致代码停止执行,所以单凭特性检测语法支持程度很棘手。

虽然我们目前针对新语法检测没有一个好的的解决方案,但现在有一种方式可以检测基本的ES2015语法支持。

解决方案是使用<script type="module">

大多数开发者认为<script type="module">也是加载ES模型的一种方式(当然这是正确的),但是<script type="module">也有更直接的功能,加载浏览器可处理的、使用ES2015+语法的JavaScript文件。

换句话说,每个支持<script type="module">的浏览器也支持ES2015+特性。例如:

  • 支持<script type="module">的浏览器也支持async、await
  • 支持<script type="module">的浏览器也支持Class类
  • 支持<script type="module">的浏览器也支持箭头函数
  • 支持<script type="module">的浏览器也支持fetch、Promise、Map、Set等

现在唯一需要做的是对于不支持<script type="module">的浏览器做一个降级方案。如果你当前是ES5版本的代码,那么很幸运,你已经完成了这个工作。现在需要做的是生成ES2015+版本的代码。

接下来阐释如何实现这项技术,并讨论我们应该如何编写ES2015+代码。

实现方式

如果你已经在使用像webpack、rollup等打包JavaScript,你应该继续保持。

接下来,除了你当前的包,你将生成第二个包,和第一个方式一样。唯一不同的是你不需要转译为ES5并且你也不需要引入polyfills插件。

如果你已经在用babel-preset-env(你应该使用该插件),第二步是非常简单的。您所要做的就是使用支持<script type="module">的浏览器,这样Babel将忽略不必要的转化的语法。

换句话说,它将输出ES2015+代码而不是ES5。

例如,如果你用webpack并且你的主脚本入口点是./path/to/main.js,根据当前的