BabelJS-ES6代码执行

在现代的JavaScript开发中，ES6已经成为一个必不可少的部分，但有些浏览器并不支持ES6的新特性，在这种情况下，需要使用转换工具来将ES6的代码转换为ES5的代码，这便是 babelJS 的作用所在。

Babel是一个广受欢迎的 JavaScript 编译工具，它可以将 ES6、ES7 甚至 ESNext （JavaScript.next 标准的一部分，用于描述 ECMAScript 未来可能的新特性）转换为 ES5。

安装Babel

Babel的安装可以使用npm命令进行安装，安装完成后可以在终端输入以下命令来验证Babel是否成功安装：

npm install -g babel-cli
babel --version

Babel转换代码

要使用Babel来转换代码，需要在命令行中输入以下内容：

babel input.js -o output.js

其中，input.js 是 ES6 代码文件，output.js 是 Babel 转换后的 ES5 代码文件。例如，我们有一个包含 ES6 代码的文件 index.js，可以使用以下命令将其转换为 ES5 代码：

babel index.js -o output.js

配置文件

为了避免每次都要在命令行中键入参数，可以使用配置文件来配置 Babel。配置文件名称为 .babelrc，包含了Babel转换代码的所有配置选项。以下是一个 .babelrc 文件的例子：

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

在这个配置文件中，我们指定了一个 preset，即 @babel/preset-env，它可以将 ES6 转换为 ES5。该配置文件还指定了一个空插件列表（即没有启用插件），这是因为我们仅仅需要将 ES6 转换为 ES5，而不需要使用插件。

Babel插件

Babel 的插件会帮助我们在转换代码时实现更复杂的操作。以下是一个使用插件来转换代码的例子：

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-transform-arrow-functions", {"spec": true}],
    ["@babel/plugin-transform-for-of", {"loose": true}]
  ]
}

在这个配置文件中，我们添加了两个插件：@babel/plugin-transform-arrow-functions 和 @babel/plugin-transform-for-of。这两个插件分别会将 ES6 箭头函数和 for-of 循环转换为 ES5 代码。

总结

使用 Babel，我们可以方便地将 ES6 代码转换为 ES5 代码，使其在不支持 ES6 特性的浏览器中运行。在配置文件中使用插件可以进一步扩展 Babel 的转换能力。