但是这些插件从维护到书写极为麻烦，后来官方统一推荐使用env，全部替代了这些单一的插件功能，可以简化配置如下，也就是我前面提到了babel-preset-env：
{ "presets": [ "es2015" ] }
这里主要介绍两款常用插件，分别是babel-plugin-transform-runtime，babel-plugin-syntax-dynamic-import。
基本配置代码如下：
{ "plugins": [ "syntax-dynamic-import",["transform-runtime"] ] }
transform-runtime
为了解决这种全局对象或者全局对象方法编译不足的情况，才出现了transform-runtime这个插件，但是它只会对es6的语法进行转换，而不会对新api进行转换。如果需要转换新api，也可以通过使用babel-polyfill来规避兼容性问题。
对Object.assign进行编译，配置与未配置经过webpack编译后的代码片段如下：
// 未设置代码片段： __webpack_require__("ez/6"); var aaa = 1; function fna() { var dd = 33333; var cc = Object.assign({ key: 2 }); var xx = String.prototype.repeat.call('b', 3); if ("foobar".String.prototype.includes("foo")) { var vv = 1; } return dd; } // 设置代码片段： /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign__); __webpack_require__("ez/6"); var aaa = 1; function fna() { var dd = 33333; var cc = __WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default()({ key: 2 }); var xx = String.prototype.repeat.call('b', 3); if ("foobar".String.prototype.includes("foo")) { var vv = 1; } return dd; }
对class定义类会进行编译，配置与未配置经过webpack编译后的代码片段如下：
// 未设置代码片段： function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Canvas = function Canvas(height, width) { _classCallCheck(this, Canvas); this.height = height; this.width = width; }; var Canvas2 = function Canvas2(height, width) { _classCallCheck(this, Canvas2); this.height = height; this.width = width; };
// 设置代码片段： /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck__); var Canvas = function Canvas(height, width) { __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, Canvas); this.height = height; this.width = width; }; var Canvas2 = function Canvas2(height, width) { __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, Canvas2); this.height = height; this.width = width; };
对Generator函数也有同上的编译效果，目前项目中使用该函数较小，一般使用promise替代，以及async await所以未对该函数做测试。
官方说对promise也会产生编译，但是实际测试结果却没有效果
经过webpack打包最终测试，引入transform-runtime该配置项后，打包入口js文件大小会略微增大，并不像官方说的能够缩小文件体积
未配置的最终打包效果：
配置后的最终打包效果：
虽然文件大小会有所增大，但是解决一些兼容性的问题，同时，从以上给出的测试代码例子来看，使用transform-runtime后，可以减少内部全局函数的定义，从结构上看尊崇了webpack的模块化思想，所以还是建议使用该插件。
syntax-dynamic-import
这个插件主要解决动态引入模块的问题
function nDate() { import('moment').then(function(moment) { console.log(moment().format()); }).catch(function(err) { console.log('Failed to load moment', err); }); } nDate();
如果.babelrc配置项中使用了"stage-2"，也可以不实用该插件，同样支持动态模块引入。
不然就会报以下错误：
Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level, or (import 和 export只能在最外层，也就是不能用在函数或者块中)
Module build failed: SyntaxError: Unexpected token, expected {
其他配置项
ignore
主要作用就是可以指定不编译那些代码
{ "ignore":["./module/a.js"] }
let,Object.assign,class定义都未编译，编译效果如下：