第 09 课：根据浏览器构建

背景

在 Babel 等转译工具的帮助下，我们可以在项目中使用所有的 ES6+ 的语言特性，但是我们最终交付的代码仍旧需要转译成 ES5 代码以兼容旧浏览器。现在所有的现代浏览器都已经很好地支持了 ES6+ 的语言特性，为了那很小的一部分旧浏览器，我们却不得不强迫所有的现代浏览器运行转译后的冗长、执行效率低下的 ES5 代码。为了更好的用户体验，作为开发者我们有责任去解决这个问题。

1 特性检查

对于 JS 和 DOM 新的 API，我们在不确定浏览器是否支持的情况下，最常采取的方式是在代码运行的时候进行特性检查。例如：

if(browserSupportsNewFeature){
  // 使用新特性
} else {
  // 使用替代方式或者引入Pollyfill
}

这种特性检测方式对于检测 JS 或 DOM 的新 API 比较有效，但是 JS 中的新语法的检查就很棘手了。JS 的解析器一旦不能识别某个语法，将直接抛出语法错误，所有的代码将没法儿执行。例如 let 声明，箭头函数。

虽然目前没有特别好的针对新语法的特性检查方式，不过目前有一种方式可以检查浏览器支持的 ES6 的语法。具体的的方式是：

<script type="module">

大多数同学可能知道 <script type