BabelJS - Babel插件介绍

简介

BabelJS是一个JavaScript编译器，可以帮助你将ES6+代码转换成向后兼容版本的JavaScript代码，从而可以在不支持新特性的环境中运行。Babel提供了各种插件，可以用来转换特定的语法、API、甚至是样式。本文将介绍几个常用的Babel插件。

插件列表

@babel/plugin-transform-arrow-functions

将ES6的箭头函数转换为向后兼容的版本。

// 转换前
const double = (num) => num * 2;

// 转换后
var double = function (num) {
  return num * 2;
};

@babel/plugin-transform-block-scoped-functions

将ES6的块级作用域函数转换为向后兼容的版本。

// 转换前
if (true) {
  function hello() {
    console.log("hello");
  }
  hello();
}

// 转换后
if (true) {
  var hello = function hello() {
    console.log("hello");
  };
  hello();
}

@babel/plugin-transform-classes

将ES6的类转换为向后兼容的版本。

// 转换前
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

// 转换后
var Animal =
/*#__PURE__*/
function () {
  function Animal(name) {
    _classCallCheck(this, Animal);

    this.name = name;
  }

  _createClass(Animal, [{
    key: "speak",
    value: function speak() {
      console.log("".concat(this.name, " makes a noise."));
    }
  }]);
  return Animal;
}();

@babel/plugin-transform-destructuring

将ES6的解构赋值转换为向后兼容的版本。

// 转换前
const person = { name: "John", age: 22 };
const { name, age } = person;

// 转换后
var person = {
  name: "John",
  age: 22
};
var name = person.name,
    age = person.age;

@babel/plugin-transform-typeof-symbol

将ES6的Symbol类型转换为向后兼容的版本。

// 转换前
const symbol = Symbol();

// 转换后
var symbol = typeof Symbol !== "undefined" && Symbol() || "@babel/typeof-symbol";

使用方法

安装Babel：

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

安装插件：

npm install --save-dev @babel/plugin-transform-arrow-functions @babel/plugin-transform-block-scoped-functions @babel/plugin-transform-classes @babel/plugin-transform-destructuring @babel/plugin-transform-typeof-symbol

在Babel配置文件中添加插件：

{
  "plugins": [
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-block-scoped-functions",
    "@babel/plugin-transform-classes",
    "@babel/plugin-transform-destructuring",
    "@babel/plugin-transform-typeof-symbol"
  ]
}

使用Babel转换你的代码：

npx babel src --out-dir dist

结论

Babel是一个非常强大的工具，可以让你在现代JavaScript的使用中更自由，更优雅。通过使用Babel插件，你可以将ES6+代码转换为向后兼容的版本，从而可以在不支持新特性的环境中运行。