由于新版本的ECMASscript的强大特性，使我们写js代码更加得心应手，例如：calss，let，for...of，promise等等，但可惜的是这些js新特新只被最新版本的浏览器支持，那么指定范围的低版本的浏览器的支持就需要一个专门的工具，babel就是这样的一块前端工具。
但是babel系列的插件现在越来越多，对于初次接触使用它的人来说需要花费不少的时间，尤其是讨厌英文的人。
babel-6已经放弃了原来的babel包，取而代之的是各种转换插件，刚开始，我也很纳闷，为什么要分这么多插件包呢，原先的一个不好吗？随着使用我么发现，这些插件的职责分明，避免了‘一刀切’的问题，不管你需不需要都给你编译。
babel-loader
这个包是由babel团队开发的loader，用来告诉webpack我想要对我的js代码进行兼容性编译。
babel-loader 只是起到一个通知者的角色，通知babel你需要干活了，在webpack的module中使用代码如下：
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/, // 不对node_modules目录下的文件进行编译，可以提升webpack打包速度，其他loader也有这个配置
use: {
loader: 'babel-loader',
// loader: 'babel-loader?cacheDirectory', // 使用缓存目录它可以进一步提升webpack的编译速度
options: { // 这个配置项我们一般单独拿出来，创建一个‘.babelrc’文件来单独存放配置项
presets: ['@babel/preset-env']，// babel预设
plugin: ['@babel/plugin-proposal-object-rest-spread'] // 所需要使用的插件
}
}
}
]
}
babel-core
如果说 babel-loader 是告诉webpack我要对js文件进行代码兼容性编译，那么，webpack接下来就是要找babel，而bable的入口就是 babel-core ，只有通过它，webpack才能使用各种babel的api（前提是你安装了相关的api）。
babel-preset-es* 和 babel-preset-stage-*
babel-preset-es2015 ，babel-preset-es2016 ，babel-preset-es2017等等傻傻的分也分不清楚。
这些预设将支持ES6新语法的兼容性编译。
将代码转化为 ES3
babel-preset-es3
将代码转化为 ES5
'babel-preset-es2015' ，
'babel-preset-stage-0' ，
'babel-preset-stage-1' ，
'babel-preset-stage-2' ，
'babel-preset-stage-3' ，
将代码转化为 ES6
'babel-preset-es2016' 将ES2016转化成ES6，
'babel-preset-es2017' 将ES2017转化成ES6，
预设只能将ES6语法编译为你指定的ES版本语法，例如：箭头函数，但是像 Array.from 这样的API呢他无能为力。那么，怎么办呢，我们下面来介绍几种解决方案。
处理ES6 API
babel-polyfill
babel预设可以编译几乎所有的JavaScript新语法，但是对于API却不能解决，解决这个问题babel用的是 babel-polyfill (它有core-js和regenerator两部分构成)。
执行安装命令：
npm install --save-dev babel-polyfill
babel-polyfill 有三种引入方法。
1.那个模块需要就在那个模块引入，
require('babel-polyfill');
2.全局引入方法1，在项目的入口文件引入，如果项目有多个入口，则在每个需要的入口分别加入。
require('babel-polyfill');
3.全局引入方法2，可以在项目的 webpack.config.js 的入口配置项中引入。
entry: {
app: ['babel-polyfill', './main.js']
},
这是第一种解决方案用来将ES6代码编译为es5。但是这种方案，增加了一些不必要的代码，webpack打包后的文件比较大，使用它还有一个问题就是容易造成全局污染。。
而刚刚好babel提供了babel-runtime。babel-plyfill我们以前经常用，而babel-runtime，则是现在常用的。
babel-runtime
babel-runtime不会污染全局对象。如：当前的运行环境如果不支持Symbol，可以访问 babel-runtime/core-js/symbol 这里重新定义了symbol，此外还有Promise，Set 和 Map 等。
babel-runtime 官方建议用在生产环境，而开发环境使用 babel-plugin-transform-runtime
babel-plugin-transform-runtime
引用自：https://github.com/babel/babel-loader
babel uses very small helpers for common functions such as _extend. By default this will be added to every file that requires it.
You can instead require the babel runtime as a separate module to avoid the duplication.
这段话的意思是说：
babel会使用一些非常小的辅助（helper）函数作为通用函数，例如：_extend 。默认情况下，这类函数将被添加到每个需要它的文件中。这时你可以使用babel runtime作为单独的模块来避免重复。
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/, // 不对node_modules目录下的文件进行编译，可以提升webpack打包速度，其他loader也有这个配置
use: {
loader: 'babel-loader',
// loader: 'babel-loader?cacheDirectory', // 使用缓存目录它可以进一步提升webpack的编译速度
options: { // 这个配置项我们一般单独拿出来，创建一个‘.babelrc’文件来单独存放配置项
presets: ['@babel/preset-env']，// babel预设
plugin: ['@babel/transform-runtime']
}
}
}
]
}
babel-plugin-transform-runtime 包含一个内置的polyfill(它包含一个自定义的regenerator运行时和core.js)，所以，在webpack中使用 ProvidePlugin 用 shimming 方法定义 Promise 将不起作用。
env preset
babel-preset-env 允许你指定一个代码执行环境，并且只编译该环境缺少的特性。
而非 babel-pre-env 预设存在的问题在于它们往往做得太多。例如，大多数现代浏览器都支持ES6生成器。如果您使用 babel-preset-es2015 这些预设，ES6生成器函数将始终被转换为复杂的ES5代码。
.babelrc 配置文件如下：
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions", "ie >= 7"]
}
}
]
]
支持最近两个版本的浏览器和IE7以上的浏览器。
其它babel插件
babel-plugin-tranform-classes // 解决ES6类（class）的兼容性
使用实践
babel-core，babel-preset-es2015，babel-polyfill，
首先，.babelrc 代码如下：
{
"presets": ["es2015"]
}
然后，修改 webpack.config.js 代码如下：
entry: {
app: ['babel-polyfill', './main.js']
},
babel-polyfill 还有其他的引入方式
babel-core，babel-preset-es2015，babel-transform-runtime
仅需要修改 .babelrc 代码如下：
{
"presets": ["es2015"],
"plugins": ["transform-runtime"]
}
babel-core，babel-preset-es2015，babel-transform-runtime, babel-preset-stage-*,
使用 babel-preset-stage-* ，我们就是想使用一些更新的js特性，以 babel-preset-stage-2 为例：
仅需要修改 .babelrc 代码如下：
{
"presets": ["es2015", "es-stage-2"],
"plugins": ["transform-runtime"]
}
babel-core，babel-preset-es2015，babel-transform-runtime, babel-preset-env
给我们的项目指定支持的浏览器和运行环境。
仅需要修改 .babelrc 代码如下：
{
"presets": ["es2015"],
"plugins": ["transform-runtime"].
"env": {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"], // 浏览器
"node": "6.10" // node
}
}
}
你可能发现这里没有介绍 babel-cli, babel-register 和babel插件，解释一下，这里主要是为了webpack的使用进行的介绍，如果有很多人需要的话可以在做介绍。
下一篇babel的文章我会介绍，如何在webpack中使用 babel-eslint 。
参考资料:
babel-preset-env: a preset that configures Babel for you
babel-preset-env from npmjs.com
babel中文参考手册
其它关于webpack的系列文章webpack-learning
