如何用babel将ES6转换为指定的版本的ES代码

由于新版本的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' ，