javascript - 为现代浏览器转译 ES7 到 ES6

Question

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

这让我想知道...

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

Answer 1

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

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

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

如果没有任何参数，env 插件将创建一个适用于各种浏览器的包，这可能比专门为现代浏览器(如 Firefox)构建的包要大得多:

{
  "presets": ["env"]
}

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

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

npx browserslist "> 10%, last 3 versions"

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

一旦您弄清楚哪些浏览器列表查询适合您创建一个大包以实现最大的浏览器兼容性和一个更小的包以适应现代浏览器，您可以使用 ngx_http_browser_module根据传入请求的用户代理服务包。