webpack配置babel篇
babel-polyfill & babel-runtime & babel-preset-env
babel-core
babel-core 的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。（ast=抽象语法 # 树）
babel-polyfill
babel-runtime
babel-runtime不会污染全局空间和内置对象原型。事实上babel-runtime是一个模块，你可以把它作为依赖来达成ES2015的支持。
比如环境不支持Promise，你可以在项目中加入
require(‘babel-runtime/core-js/promise’)
来获取Promise。
这样我们就弥补了babel-polyfill的缺点，达到了按需加载的效果。但是在实际项目开发过程中，我们往往会写很多新的es6 api，每次都要手动引入相应的包比较麻烦，维护起来也不方便，每个文件重复引入也造成代码的臃肿。
要解决这个问题，就要用到 babel-plugin-transform-runtime，它会分析我们的 ast 中，是否有引用 babel-rumtime 中的垫片（通过映射关系），如果有，就会在当前模块顶部插入我们需要的垫片。
接下来我们尝试一下，先安装babel-runtime和babel-plugin-transform-runtime
npm install --save babel-runtime
npm install --save-dev babel-plugin-transform-runtime
由于 babel-runtime只是集中了polyfill的library，对应需要的 polyfill 都是要引入项目中，并跟项目代码一起打包的，所以就要加入到生产环境依赖中
下面在.babelrc中加入以下配置
{
"plugins": ["transform-runtime"]
}
执行打包命令，打包出来的bundle.js的大小为63K，比完整引入polyfill小了好多。但是事物都有两面性，babel-runtime有个缺点，它不模拟实例方法，即内置对象原型上的方法，所以类似Array.prototype.find，你通过babel-runtime是无法使用的，这只能通过 babel-polyfill 来转码，因为 babel-polyfill 是直接在原型链上增加方法。这就悲催了，难道还是要完整引入babel-polyfill?其实还有一个解决的办法，就是用babel-preset-env
babel-runtime的相关配置
core-js
core-js 是用于 JavaScript 的组合式标准化库，它包含 es5 （e.g: object.freeze）, es6的 promise，symbols, collections, iterators, typed arrays， es7+提案等等的 polyfills 实现。也就是说，它几乎包含了所有 JavaScript 最新标准的垫片。不过为什么它不把 generator 也实现了…