为现代浏览器编译 ES7 到 ES6答案

【问题标题】：Transpile ES7 to ES6 for modern browsers为现代浏览器编译 ES7 到 ES6
【发布时间】：2018-06-01 12:44:24
【问题描述】：

我有一个用 es6/7 编写的 react 应用程序，我很乐意使用 babel 将其转换为 es5 以兼容所有浏览器。

这让我想知道......

是否可以创建一个转译为 es6 的 js 包，如果它是现代浏览器，然后可以由 nginx 提供服务？这应该可以节省文件大小和可能的执行时间。

【问题讨论】：

【解决方案1】：

是的，您可以使用 Babels env 预设来创建提供不同级别浏览器兼容性的捆绑包的多个版本。

例如，这个 .babelrc 将创建一个与 Firefox 50 及更高版本兼容的包：

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["Firefox > 50"]
      }
    }]
  ]
}

在没有任何参数的情况下，env 插件将创建一个适用于各种浏览器的捆绑包，这可能会比专为 Firefox 等现代浏览器构建的捆绑包大得多：

{
  "presets": ["env"]
}

env 预设使用browserslist 来指定 Babel 应该用作转译目标的浏览器。 Browserslist 具有一种查询语言，可让您按类型、平台、版本、使用统计信息等指定浏览器。查看他们的文档，确定要为特定受众使用哪些查询。

您可以像这样在命令行上尝试 browserslist 查询：

npx browserslist "> 10%, last 3 versions"

这为您提供了使用率高于 10% 的最近 3 个版本的浏览器的列表。

一旦您确定了哪些 browserslist 查询可以为您创建一个大包以实现最大的浏览器兼容性并为现代浏览器创建一个更精简的包，您可以使用 ngx_http_browser_module 来提供包，具体取决于传入请求。

【讨论】：