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')
     ]



你可能感兴趣的:(webpack)