babel-preset-env使用指南

文章概览

babel-preset-env是非常重要且常用的一个插件预设,掌握它的用法以及实现原理非常有必要。

本文主要内容包括:babel-preset-env是什么、入门实例、如何配置以支持特定版本的 node/浏览器、实现原理等。

本文所有例子可以在 笔者的github 找到。

babel-preset-env简介

首先,介绍下历史背景,对了解和学习 babel-preset-env 有帮助。

最初,为了让开发者能够尽早用上新的JS特性,babel团队开发了babel-preset-latest。这个preset比较特殊,它是多个preset的集合(es2015+),并且随着ECMA规范的更新更增加它的内容。

比如,当前(2018.06.02),它包含的preset包括:es2017、es1016、es2015。

到了明年,可能它包含的preset就包括:es2018、es2017、es2016、es2015。

随着时间的推移,babel-preset-latest 包含的插件越来越多,这带来了如下问题:

  1. 加载的插件越来越多,编译速度会越来越慢;
  2. 随着用户浏览器的升级,ECMA规范的支持逐步完善,编译至低版本规范的必要性在减少(比如ES6 -> ES5),多余的转换不单降低执行效率,还浪费带宽。

因为上述问题的存在,babel官方推出了babel-preset-env插件。它可以根据开发者的配置,按需加载插件。配置项大致包括:

  1. 需要支持的平台:比如node、浏览器等。
  2. 需要支持的平台的版本:比如支持node@6.1等。

默认配置的情况下,它跟 babel-preset-latest 是等同的,会加载从es2015开始的所有preset。

入门例子

首先,安装依赖。

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

创建 index.js。

let foo = () => 'foo';

配置文件 .babelrc 如下,当前为默认配置。

{
  "presets": [ "env" ]
}

运行转换命令

`npm bin`/babel index.js

转换结果如下:

'use strict';

var foo = function foo() {
  return 'foo';
};

针对node版本的配置

前面提到,babel-preset-env 提供了更精细化的配置,以提升编译速度,同时减少代码冗余。

我们看下实际例子。假设当前有如下代码:

// index.js
async function foo () {}

采用 babel-preset-env,默认配置下,输出的转换结果如下(具体内容不用关心,知道很长就行了)。

"use strict";

var foo = function () {
  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
          case "end":
            return _context.stop();
        }
      }
    }, _callee, this);
  }));

  return function foo() {
    return _ref.apply(this, arguments);
  };
}();

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

如果我们的代码是打算跑在node@8.9.3版本上,那上面的兼容代码就有点多余了,因为node@8.9.3已经支持了async/await。

修改下 .babelrc,加上配置参数"target",它表示我们需要支持哪些平台+哪些版本。这里声明我们要支持的是node版本为8.9.3。

{
  "presets": [
    ["env", {
      "targets": {
        "node": "8.9.3"
      }      
    }]
  ]
}

再次进行转码,结果如下。几乎没有变化,因为node最新版本支持 async/await,因此不需要额外的兼容代码。

"use strict";

async function foo() {}

针对浏览器版本的配置

babel-preset-env 同样提供了对浏览器版本的配置能力。

支持特定版本的浏览器

假设我们的代码如下:

let nick = '程序猿小卡';
let desc = `你好 ${nick}`;

如果只需要支持 IE11,那么可以这样配置。

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": "ie 11"
      }      
    }]
  ]
}

如果只需要支持支持 Edge 16,那么可以这样配置

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": "edge 16"
      }      
    }]
  ]
}

因为 IE 11 不支持模板字面量,而 Edge 16支持模板字面量,因此上面配置的转码结果是不同的,读者可以自行尝试。

支持特定版本范围的浏览器

大部分时候,我们要针对的都是特定范围的浏览器,比如 IE8+,那么,逐个指定是不现实的。好在 babel-preset-env 支持要支持的版本范围。

比如,我们需要支持 IE8+、chrome62+,那么可以这样配置:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [ "ie >= 8", "chrome >= 62" ]
      }      
    }]
  ]
}

看下前面声明的范围涵盖了哪些浏览器。

$ `npm bin`/browserslist "ie >= 8, chrome >= 62"
chrome 66
chrome 65
chrome 64
chrome 63
chrome 62
ie 11
ie 10
ie 9
ie 8

对浏览器版本范围的配置,babel-preset-env 借助了 browserslist 这个库,还有更多的配置方式,可以自行探究。

babel-preset-env实现原理

实现原理很简单。官方文档写的挺简洁的,挑重点大致翻译下。

1、首先,检测浏览器对JS特性的支持程度,比如通过通过 compat-table 这样的外部数据。

2、将 JS特性 跟 特定的babel插件 建立映射,映射关系可以参考 这里

3、stage-x 的插件不包括在内。

4、根据开发者的配置项,确定至少需要包含哪些插件。比如声明了需要支持 IE8+、chrome62+,那么,所有IE8+需要的插件都会被包含进去。

相关链接

https://babeljs.io/docs/plugins/preset-env/#how-it-works

posted @ 2018-06-05 08:15 程序猿小卡 阅读(...) 评论(...) 编辑 收藏