您的位置:

Babel-preset-env:真正的跨版本转码器

使用 ES6/7 草案特性编写代码并不保证所有浏览器都能够解释。因此,我们需要使用转码器。Babel 是一个非常著名的 JavaScript 转码器,它可以将 ES6/ES7 代码转换为 ES5 代码,从而保证代码在所有浏览器中的兼容性。

一、Babel-preset-env是什么

Babel-preset-env 是一个 Babel 官方提供的转码规则集合,它能根据当前环境以及配置的目标浏览器或运行环境,自动确定需要转码的插件和 polyfill,从而实现最小化的转码代码。

举个例子,如果你希望你的代码可以在 IE11 上运行,你可以在 Babel 的配置中设置 target 属性为 "ie11",然后就可以使用 Babel-preset-env 转码为符合 IE11 标准的 JavaScript 代码。

二、Babel-preset-env的亮点

1. 模块化支持:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "chrome": 52
      }
    }],
    "stage-2"
  ]
}

将 modules 设为 false,Babel 转换时不会将 ES6 模块化语法转换为 CommonJS 规范。这是因为现代的浏览器都已经支持 ES6 模块化了,所以不需要再使用 CommonJS 规范。这样可以保留 tree shaking 的能力,减少打包大小。

2. 按需加载:

{
  "presets": [
    ["env", {
      "useBuiltIns": "usage",
      "corejs": 2,
      "targets": {
        "chrome": 52
      }
    }],
    "stage-2"
  ]
}

useBuiltIns: "usage" 可以根据你的代码中所使用到的特性,只引入相关的 polyfill。这样可以减少代码量,加快应用的响应速度。同时,"corejs": 2 属性指定了使用 core-js 2 版本的 polyfill 库。

3. 支持浏览器列表:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [
          "> 1%",
          "last 2 versions",
          "Firefox ESR"
        ]
      }
    }]
  ]
}

Babel-preset-env 支持各种浏览器列表。除了常用的 "> 0.5%", "> 0.25%", "> 1%", "> 2%" 等等,还支持 last 2 versions(表示最近两个版本的浏览器),Firefox ESR 等等。

三、正确使用 Babel-preset-env

1. 安装 Babel-preset-env:

npm install --save-dev babel-preset-env

2. 配置 Babel:

{
  "presets": [
    ["env", {
      "targets": {
        "chrome": 52
      }
    }],
    "stage-2"
  ]
}

3. 使用 Babel:

在 package.json 中添加 script 命令,然后通过 npm run 命令执行:

{
  "scripts": {
    "build": "babel src -d lib"
  }
}

上方的 babel 命令会将 src 目录下的文件转码到 lib 目录下面。

四、总结

Babel-preset-env 是一个非常好用的 Babel 插件,它考虑了转码的最效率以及最小化的代码。

在具体使用时,需要根据自身项目实际情况配置 targets,实现按需加载 polyfill。

此外,配合其他 Babel 插件一起使用,可以极大地提高开发效率,让我们可以尽可能地享受到 ES6/7 提供的新特性。