Babel 配置：过不去的坑-JavaScript中文网-JavaScript教程资源分享门户

随着前端应用变得越来越复杂，现代化的浏览器时代又开始崭露头角，许多前端开发者已经开始使用一些新的语言特性例如箭头函数、包含可选链式调用的操作符等等，这些特性让代码变得更加简洁易读，但同时也带来了一个很大的问题：浏览器对这些特性的支持度并不完善。

幸运的是，有一个神奇的工具，它能够将新的 JavaScript 语法转换为老的浏览器所理解的语法：Babel。Babel 支持转换 ECMAScript 2015+ 特性，使其能够在更旧的浏览器中运行。但是配置 Babel 可能会让一些人感到头疼，因为 Babel 的配置相当复杂，并且由于它的灵活性，难免会遇到一些坑。

什么是 Babel？

Babel 是一个 JavaScript 编译器，它的作用是将新的语法转换成老的语法。

举个例子，我们有如下 ES6 代码：

const add = (a, b) => a + b;
console.log(add(2, 5));

在使用 Babel 进行转换后，代码会转化为 ES5 的写法：

"use strict";

var add = function add(a, b) {
  return a + b;
};

console.log(add(2, 5));

这种转换会让在较老的浏览器上运行的代码更加兼容和稳定。

Babel 的配置

Babel 的配置看起来很简单，其实却相当复杂。你需要创建一个 .babelrc 文件，然后指定哪些语言特性需要转换。以下是一个例子：

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

在这个配置中，我们使用了 @babel/preset-env 预设，这个预设可以智能地根据目标浏览器的版本来转换 ES6+ 代码。我们指定了 targets，它是一个浏览器列表，浏览器的版本从 V79 的 Chrome 开始，IE 的版本为 11。

Babel 的坑

尽管 Babel 看起来比较简单，但是使用过程中还会遇到一些问题。我们来看看一些常见的坑。

插件顺序

当你使用多个 Babel 插件时，它们的顺序变得非常重要。由于每个插件都会重写代码，如果顺序错误，可能会导致代码出现奇怪的问题。

举个例子，我们猜测下面的代码将会打印何种结果。

const add = (a, b) => a + b;
console.log(add(2, 5));

如果你的 .babelrc 配置是这样的：

{
  "presets": [],
  "plugins": ["@babel/plugin-transform-arrow-functions", "@babel/plugin-transform-block-scoping"]
}

则最终的 ES5 代码如下：

"use strict";

const add = (a, b) => a + b;
console.log(add(2, 5));

如果你运行此代码，将会发现它会抛出一个错误：Unexpected token =>。这是因为顺序错误导致箭头函数转换失败。

如何修复这个问题呢？将插件的顺序改为这样：

{
  "presets": [],
  "plugins": ["@babel/plugin-transform-block-scoping", "@babel/plugin-transform-arrow-functions"]
}

这样代码将成功转换为 ES5 代码。

Polyfill

在使用 Babel 进行转换后，仍然存在一些新的语言特性，特别是 API，在某些较旧的浏览器中可能无法使用。为了解决这个问题，可以使用 polyfill。

举个例子，我们猜测下面的代码将会打印何种结果。

const promise = new Promise(resolve => {
  setTimeout(() => {
    resolve("Hello, world!");
  }, 1000);
});

promise.then(value => {
  console.log(value);
});

如果你的 .babelrc 配置是这样的：

{
  "presets": [],
  "plugins": ["@babel/plugin-transform-arrow-functions", "@babel/plugin-transform-block-scoping", "@babel/plugin-transform-regenerator"]
}

则最终的 ES5 代码如下：

"use strict";

var _setTimeout = require("@babel/runtime-corejs3/core-js-stable/set-timeout");

var _promise = require("@babel/runtime-corejs3/core-js-stable/promise");

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

require("@babel/runtime-corejs3/regenerator");

var _console;

var promise = new _promise.default(function (resolve) {
  (0, _setTimeout.default)(function () {
    resolve("Hello, world!");
  }, 1000);
});
promise.then(function (value) {
  return (_console = console).log.apply(_console, (0, _concat.default)(["Polyfill example: "], value));
});

这个代码中使用的 setTimeout、Promise 等新 API 在某些较旧的浏览器中可能无法使用。为了解决这个问题，我们需要在代码中添加对应的 polyfill。

例如，在上述代码中，我们可以添加如下代码：

import "core-js/stable";
import "regenerator-runtime/runtime";

这样在老的浏览器中就可以顺利运行了。

总结

Babel 是一个非常有用的工具，可以让你使用新的 JavaScript 语言特性，同时还能兼容较旧浏览器。但是在使用时，需要注意一些 Babel 的坑。在配置时，需要注意插件的顺序，以及是否需要添加 polyfill。希望本文能够帮助你解决 Babel 的一些问题，祝你愉快地写代码！

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

Babel 配置：过不去的坑

什么是 Babel？

Babel 的配置

Babel 的坑

插件顺序

Polyfill

总结

纠错反馈