webpack加入 babel-plugin-transform-runtime 和 babel-polyfill

先来说说babel-plugin-transform-runtime

在转换 ES2015 语法为 ECMAScript 5 的语法时，babel 会需要一些辅助函数，例如 _extend。babel 默认会将这些辅助函数内联到每一个 js 文件里，这样文件多的时候，项目就会很大。

所以 babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-runtime 中，这样做能减小项目文件的大小。

npm install --save-dev babel-plugin-transform-runtime

修改.babelrc配置文件,增加配置

.babelrc

     "plugins": [
       "transform-runtime"
     ]

再来看babel-polyfill

Q: 为什么要集成babel-polyfill?

A:

Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

网上很多人说，集成了transform-runtime就不用babel-polyfill了，其实不然，看看官方怎么说的：

NOTE: Instance methods such as "foobar".includes("foo") will not work since that would require modification of existing built-ins (Use babel-polyfill for that).

所以，我们还是需要babel-polyfill哦。

npm install --save-dev babel-polyfill

修改webpack两个配置文件。

webpack.common.config.js

app: [
         "babel-polyfill",
         path.join(__dirname, 'src/index.js')
     ]

webpack.dev.config.js

     app: [
         'babel-polyfill',
         'react-hot-loader/patch',
         path.join(__dirname, 'src/index.js')
     ]