关于透彻理解Babel家族成员

关于Babel

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign ）都不会转码。一般：

npm 依赖安装: babel-pollify、 babel-runtime

npm dev安装: babel core、 bebel-loader(webpack + babel, 1+1>2)、babel-plugin-transform-runtime、babel-preset-env

babel-polyfill

使用： npm install到依赖

import  “babel-pollify” 
或者
require("babel-polyfill");

“好处”： babel-polyfill 是为了模拟一个完整的ES2015+环境原理是当运行环境中并没有实现的一些方法，babel-polyfill 会给其做兼容。但是这样做也有一个缺点，就是会污染全局变量，而且项目打包以后体积会增大很多，因为把整个依赖包也搭了进去。所以并不推荐在一些方法类库中去使用。

babel-runtime

配合使用babel-runtime + babel-plugin-transform-runtime 例如： promise

引入babel-runtime/core-js/promise来获取promise
或者通过babel-plugin-transform-runtime自动重写你的promise

为什么会有两个runtime插件？？其实是有历史原因的：刚开始开始只有babel-runtime插件，但是用起来很不方便，在代码中直接引入helper 函数，意味着不能共享，造成最终打包出来的文件里有很多重复的helper代码。所以，Babel又开发了babel-plugin-transform-runtime，这个模块会将我们的代码重写，如将Promise重写成_Promise（只是打比方），然后引入_Promise helper函数。这样就避免了重复打包代码和手动引入模块的痛苦。

使用： dev安装babel-plugin-transform-runtime、依赖安装babel-runtime 然后在.babelrc中加 {plugins: ['transform-runtime']}

不足： babel-runtime 不能转码实例方法 比如：

'hbyuan'.includes('h')

babel-preset-env

{
  "presets": [
    ["env", {
      "targets": {
        "chrome": 52,
        "browsers": ["last 2 versions", "safari 7"]
      },
      "modules": false,
      "useBuiltIns": "usage",
      "debug": false
    }]
  ]
}

其中的useBuiltIns就是是否开启自动支持 polyfill，它能自动给每个文件添加其需要的poly-fill。我们来尝试一下，main.js中映入babel-polyfill，直接在webpack中配置貌似是不行的。将require 改为 import，将引入提升到前面。

 - require('babel-polyfill')
 + import 'babel-polyfill'

babel-polyfill VS babel-runtime https://juejin.im/post/5a96859a6fb9a063523e2591
你真的会用Babel吗？ https://juejin.im/entry/59ba1a3c5188255e723b8cae

Hibop / Hibop.github.io