Bebal配置说明

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "development":{
      "plugins": ["dynamic-import-node"]
    }
  }
}

1、presets配置语法转译器：

      说明：语法转译器只负责转译js最新的语法，并不负责转译js新增的api和全局对象；调用顺序stage-2 => env；

      转译器包：babel-preset-env，通过在.babelrc中配置env选项，可以让代码兼容不同版本的浏览器或者node。浏览器或者node已经支持的语法将不再转译了，不支持的才转译。（还有很多转译器的包，这里暂且不解释）

      modules：false ，默认支持CommonJS规范

      targets：制定兼容浏览器类型以及版本

      stage-0：包含stage-1,2,3的功能

      stage-1：覆盖了stage-2,stage-3的所有功能

      stage-2：覆盖了stage-3的功能，并支持两个插件

     支持增强代码可读性的插件

     支持es6的解构赋值

    stage-3：支持 async，await

   2、plugins配置补丁转译器：

       说明：补丁转译器负责转译js新增的api和全局对象；调用顺序transform-runtime=>transform-vue-jsx;

       transform-runtime：babel-runtime，babel-polyfill 与之有近似的能力，但是为什么选择这哥们呢？ transform-runtime会自动polyfill es5不具备的新特性 ，即es6的API转换为es5；babel-runtime必须手动require；babel-polyfill直接改写全局prototype，方式比较暴力，容易污染全局变量，而且这个包很大。

   3、babel-plugin-dynamic-import-node

         热更新速度，开发环境通过babel将异步import()转化为同步require()来增加热更新速度，生产环境继续使用webpack的import机制。