Babel7 的 preset-env 的新特性

Babel 是一个 JavaScript 编译器，它可以将新版本的 JavaScript 代码转换成旧版本的代码，以便在旧版浏览器中运行。Babel7 是 Babel 的最新版本，它引入了一个名为 preset-env 的新特性，它可以根据你的目标浏览器版本自动选择需要转换的 JavaScript 语法和 API。

preset-env 的优点

在过去，我们需要手动配置 Babel 的插件来转换我们的代码，这往往需要我们了解每个插件所做的工作以及哪些浏览器需要该插件的转换。这种方式非常繁琐，而且容易出错。preset-env 的出现解决了这个问题。

preset-env 可以根据我们的目标浏览器版本自动选择需要转换的 JavaScript 语法和 API，这样我们就不需要手动配置插件了。preset-env 还可以根据我们的目标浏览器版本自动引入必要的 polyfill，以确保我们的代码在旧版浏览器中能够正常运行。

如何使用 preset-env

使用 preset-env 非常简单，只需在 Babel 的配置文件中添加以下代码：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "chrome": "58",
        "ie": "11"
      }
    }]
  ]
}

以上代码表示我们的目标浏览器为 Chrome 58 和 IE 11。preset-env 会自动选择需要转换的 JavaScript 语法和 API，并引入必要的 polyfill。

示例代码

下面是一个使用 async/await 的示例代码，它使用了 preset-env：

async function getData() {
  const response = await fetch('/data.json');
  const data = await response.json();
  return data;
}

这段代码使用了 async/await，这是 ES2017 中的新特性。如果我们要在旧版浏览器中运行这段代码，我们需要将其转换成 ES5 代码。使用 preset-env，我们只需要添加以下配置：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "chrome": "58",
        "ie": "11"
      }
    }]
  ]
}

然后运行 Babel，我们就可以得到转换后的代码：

"use strict";

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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"); }); }; }

function getData() {
  return _getData.apply(this, arguments);
}

function _getData() {
  _getData = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    var response, data;
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return fetch('/data.json');

          case 2:
            response = _context.sent;
            _context.next = 5;
            return response.json();

          case 5:
            data = _context.sent;
            return _context.abrupt("return", data);

          case 7:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));
  return _getData.apply(this, arguments);
}

我们可以看到，Babel7 已经将 async/await 转换成了 ES5 代码，并添加了必要的 polyfill。

总结

Babel7 的 preset-env 是一个非常有用的工具，它可以根据我们的目标浏览器版本自动选择需要转换的 JavaScript 语法和 API，并引入必要的 polyfill。使用 preset-env，我们可以简化 Babel 的配置，减少手动配置的工作量，并避免出错。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c29a8dadd4f0e0ffc7489c