Babel 强大的 ES6 转换能力

随着 JavaScript 的发展，ES6（ECMAScript 2015）成为了现代 JavaScript 的标准。ES6 引入了很多新的特性和语法，使得 JavaScript 更加灵活、易读、易维护。然而，由于 ES6 是一个相对新的标准，不是所有的浏览器都支持它。这就导致了一个问题：如何在不支持 ES6 的浏览器上运行 ES6 代码？

这时候，Babel 就派上用场了。Babel 是一个 JavaScript 编译器，它可以将 ES6 代码转换为 ES5 代码，让不支持 ES6 的浏览器也能运行 ES6 代码。除此之外，Babel 还支持很多其他的转换能力，比如转换 JSX、ES7、TypeScript 等语言的代码。

Babel 的安装和使用

Babel 的安装非常简单，只需要在命令行中运行以下命令即可：

npm install --save-dev @babel/core @babel/cli @babel/preset-env

其中，@babel/core 是 Babel 的核心库，@babel/cli 是 Babel 的命令行工具，@babel/preset-env 是 Babel 的一个预设，它可以根据目标环境自动选择需要的转换插件。

安装完成后，我们就可以使用 Babel 来转换代码了。假设我们有一个 ES6 的模块：

// math.js
export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

我们可以使用 Babel 将其转换为 ES5 的代码：

// javascriptcn.com 代码示例
// math.js
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.cube = exports.square = void 0;

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

function square(x) {
  return x * x;
}

exports.square = square;

function cube(x) {
  return x * x * x;
}

exports.cube = cube;

我们可以看到，Babel 将 ES6 的 export 和 import 语法转换为了 CommonJS 的 require 和 module.exports 语法，使得该模块可以在不支持 ES6 的浏览器上运行。

Babel 的插件和预设

Babel 的转换能力都是通过插件来实现的。一个插件就是一个 JavaScript 模块，它可以对 AST（抽象语法树）进行操作，从而实现对代码的转换。Babel 自带了很多插件，比如转换箭头函数、模板字符串、解构赋值等语法。我们也可以自己编写插件来实现更加复杂的转换。

除了插件，Babel 还提供了预设（preset），预设是一组插件的集合，它们被打包在一起，可以一次性地进行转换。Babel 自带了一些预设，比如 @babel/preset-env，它可以根据目标环境自动选择需要的转换插件。

下面是一个使用 @babel/preset-env 的例子。假设我们有一个 ES6 的模块：

// math.js
export const square = (x) => x * x;

我们可以使用 @babel/preset-env 将其转换为 ES5 的代码：

// javascriptcn.com 代码示例
// math.js
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.square = void 0;

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done) && (_e = _s.value); _n = true) { _arr.push(_e); if (i && _arr.length === i) break; } } catch (err) { if (_d) throw err; } finally { if (!_n && _i["return"] != null) _i["return"](); } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

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

function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function () {}; return { s: F, n: function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function (e) { throw e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function () { it = o[Symbol.iterator](); }, n: function () { var step = it.next(); normalCompletion = step.done; return step; }, e: function (e) { didErr = true; err = e; }, f: function () { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }

function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest(); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function () {}; return { s: F, n: function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function (e) { throw e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function () { it = o[Symbol.iterator](); }, n: function () { var step = it.next(); normalCompletion = step.done; return step; }, e: function (e) { didErr = true; err = e; }, f: function () { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done) && (_e = _s.value); _n = true) { _arr.push(_e); if (i && _arr.length === i) break; } } catch (err) { if (_d) throw err; } finally { if (!_n && _i["return"] != null) _i["return"](); } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

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

var square = function square(x) {
  return x * x;
};

exports.square = square;

我们可以看到，Babel 将 ES6 的箭头函数转换为了普通函数，使得该模块可以在不支持 ES6 的浏览器上运行。

Babel 的配置文件

Babel 的配置文件是一个名为 .babelrc 的文件，它可以用来配置 Babel 的转换规则。我们可以在配置文件中指定需要使用的插件和预设，以及其他一些选项。

下面是一个简单的 .babelrc 文件的例子：

{
  "presets": ["@babel/preset-env"]
}

这个配置文件指定了使用 @babel/preset-env 预设来进行转换。我们可以在命令行中运行以下命令来使用该配置文件：

npx babel src --out-dir lib

这个命令将 src 目录下的所有文件转换为 ES5 的代码，并将转换后的代码输出到 lib 目录中。

总结

Babel 是一个强大的 JavaScript 编译器，它可以将 ES6 代码转换为 ES5 代码，让不支持 ES6 的浏览器也能运行 ES6 代码。除此之外，Babel 还支持很多其他的转换能力，比如转换 JSX、ES7、TypeScript 等语言的代码。在使用 Babel 的过程中，我们需要了解插件和预设的概念，以及如何配置 Babel 的转换规则。通过学习和使用 Babel，我们可以更好地编写现代化的 JavaScript 代码。

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