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"]
      }
  }

}