Babel 入门

这是我参与更文挑战的第 30 天，活动详情查看：更文挑战

Babel 是什么

Babel 算是一个编译器，通过一系列的工具，将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScrtip语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

看下面这段代码：

input.map(item => item + 1);

这段代码使用了 ES6 的语法「箭头函数」，比较旧版本的浏览器不支持该语法，为了使页面在旧版本浏览器也能正常运行，我们就不得不放弃使用该语法进行开发。

而作为一名前端开发者，我们当然希望能够面向未来编程，使用更加便捷的语法，而又不需要过多地考虑兼容性问题。于是有了Babel的诞生，它替我们解决兼容性的问题，解决方案就是将我们代码中较新的语法，编译成兼容旧版浏览器的JavaScript语法，如下所示：

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});

下面我们看一下如何在我们的项目中配置Babel。

Babel本质是一个工具链，由大量的工具组成，每个工具都以单独的npm模块发布。它的核心功能包含在 @babel/core 模块中。

我们先创建一个项目文件夹myObject，进入该文件夹，npm初始化项目，然后安装@babel/core模块，如下所示：

> npm init -y  # 初始化项目
> npm install --save-dev @babel/core # 安装 @babel/core

为了能够通过命令行终端运行Babel工具，我们还需要安装@babel/cli：

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

现在我们在项目中新建一个src文件夹，并在其中创建一个test.js文件，内容如下：

input.map(item => item + 1);

之后，我们可以通过以下命令行编译src文件夹内的代码，输出到lib文件夹内，如下：

> npx babel src --out-dir lib

在lib文件夹内生成了文件test.js，但是文件内容却没有变化。这是因为Babel转换规则会体现为插件的形式，插件是小型 JavaScript 程序，它指示 Babel 如何进行代码转换。你甚至可以编写自己的插件，来应用你想要的任何转换规则。

为了实现「箭头函数」的转换，我们可以安装@babel/plugin-transform-arrow-functions插件，并执行相关命令，如下所示：

> npm install --save-dev @babel/plugin-transform-arrow-functions
> npx babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

可以看到原代码中的箭头函数已经被转成了普通函数，如下所示：

// ./lib/test.js
input.map(function (item) {
  return item + 1;
});

如果代码中还有其它 ES2015+ 功能也需要转换。我们可以使用一个 "preset"，其中包含着一组预先设定的插件，而不是逐一添加我们想要的所有插件。如下所示：

> npm install --save-dev @babel/preset-env
> npx babel src --out-dir lib --presets=@babel/env

可能你会觉得通过命令行传参数的方式太过麻烦，没关系，Babel提供了另一种方式：通过配置文件。

在项目文件夹创建文件babel.config.json，内容如下：

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

现在运行Babel可以无需携带参数了：

> npx babel src --out-dir lib