什么是babel？
babel是一个JavaScript编译器。
Babel是一个工具链，主要用于将ECMAScript 2015+代码转换为向后兼容的旧浏览器或环境中JavaScript版本。
注解：传统的编译是指转化成可执行的代码，也就是二进制代码。但是对于前端来说，因为JS是解释性语言，对于浏览器或者Node来说就是可执行的代码。
因此，前端的编译就是指将语言转化为浏览器或Node可以执行的代码，也就是能执行的js语句。因为现在的很多浏览器未能全面支持ES6/7/8，基本都全部支持ES5了，
所以这时候就需要Babel来将它们转化成低版本的JS代码，比如ES5。
所以我们使用ES6时就要用到babel，使用jsx语法时也要用到babel。
preset和plugin
Babel插件一般尽可能拆成小的力度，开发者可以按需引进。比如对ES6转ES5的功能，Babel官方拆成了20+个插件。
这样的好处显而易见，既提高了性能，也提高了扩展性。比如开发者想要体验ES6的箭头函数特性，那他只需要引入transform-es2015-arrow-functions插件就可以，而不是加载ES6全家桶。
但很多时候，逐个插件引入的效率比较低下。比如在项目开发中，开发者想要将所有ES6的代码转成ES5，插件逐个引入的方式令人抓狂，不单费力，而且容易出错。
这个时候，可以采用Babel Preset。
可以简单的把Babel Preset视为Babel Plugin的集合。比如babel-preset-es2015就包含了所有跟ES6转换有关的插件。
具体可看这里
什么是polyfill？
由于 Babel 只转换语法(如箭头函数)， 你可以使用 babel-polyfill 支持新的全局变量，例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。
它会仿效一个完整的 ES2015+ 环境，并意图运行于一个应用中而不是一个库/工具。这个 polyfill 会在使用 babel-node 时自动加载。
这意味着你可以使用新的内置对象比如 Promise 或者 WeakMap, 静态方法比如 Array.from 或者 Object.assign, 实例方法比如 Array.prototype.includes 和生成器函数。为了达到这一点， polyfill 添加到了全局范围，就像原生类型比如 String 一样。
如何使用babel？
因为现在基本上都是用webpack构建项目，主要讲下如何在webpack中使用babel。
当然如果你只是想单独体验babel的话，可以安装babel的脚手架babel-cli：babel-cli
1.安装
需要的是babel-loader和babel-core，babel-core是babel核心代码库，babel-loader用于在打包前对代码进行编译转换。
npm install --save-dev babel-loader babel-core
2.在webpack中配置
module: { rules: [ { test: /.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }
3.创建.babelrc文件
虽然已经配置好了 Babel ，但并没有让它真正生效。在项目的根目录中创建一个.babelrc文件并启用一些插件。
首先，你可以使用转换 ES2015+ 的 env preset 。
npm install babel-preset-env --save-dev
为了让 preset 生效，你需要像下面这样定义你的 .babelrc 文件：
{ "presets": ["env"] }
如何使用babel-polyfill？
1.安装
npm install --save babel-polyfill
2.使用
a.在node/browserify中使用
你需要在你的应用入口顶部通过 require 将 polyfill 引入进来。
require("babel-polyfill");
如果你在你的应用入口使用 ES6 的 import 语法，你需要在入口顶部通过 import 将 polyfill 引入，以确保它能够最先加载：
import "babel-polyfill";
b.在webpack中使用
在 webpack.config.js 中，将 babel-polyfill 加到你的 entry 数组中：
module.exports = { entry: ["babel-polyfill", "./app/js"] };