为现代浏览器转译 ES7 到 ES6

Question

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

这让我想知道...

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

Answer 1

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

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

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

没有任何参数，env 插件将创建一个适用于各种浏览器的包，这可能比专门为现代浏览器构建的包大得多，例如火狐浏览器：

{
  "presets": ["env"]
}

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

您可以像这样在命令行上尝试浏览器列表查询：

npx browserslist "> 10%, last 3 versions"

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

一旦你弄清楚哪些浏览器列表查询适合你创建一个大的包以实现最大的浏览器兼容性和一个更小的包用于现代浏览器，你可以使用 ngx_http_browser_module 来提供包，具体取决于传入请求的用户代理。

Transpile ES7 to ES6 for modern browsers