vue-cli + webpack3.6.0的 .babelrc 的配置及分析

{

  "presets": [
      ["env"]
  ],
  // syntax-dynamic-import 主要解决动态引入模块的问题
  // transform-vue-jsx  Vue中的渲染函数（render）可以支持JSX语法
  // transform-runtime  为了解决这种全局对象或者全局对象方法编译不足的情况，但是它只会对es6的语法进行转换，而不会对新api进行转换。
  //                    如果需要转换新api，也可以通过使用babel-polyfill来规避兼容性问题。
  // transform-object-rest-spread 用于支持 对象的spread操作符 例如 ...mapState
  "plugins": ["syntax-dynamic-import", "transform-vue-jsx", "transform-runtime", "transform-object-rest-spread"],
  // 下面指的是在生成的文件中，不产生注释
  "comments": false,
  "env": {
      // test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development
      "test": {
          "presets": ["env", "stage-2"],
          // transform-es2015-modules-commonjs 项目系统需要将es6模块转成AMD模块
          // dynamic-import-node  Babel插件到 transpile import()的延迟 require()，用于 node
          "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
      },
      "development": {
          "plugins": ["dynamic-import-node"]
      },
      "production": {
          // 移除console
          "plugins": ["transform-remove-console"]
      }
  }

}