参考文献：https://zhuanlan.zhihu.com/p/147083132

1、preset-nev

在.babelrc里作配置

  1. {
  2.   // 预设：可以作为babel插件的组合
  3.   "presets": ["@babel/preset-env"],
  4.   "plugins": [],
  5. }

@babel/preset-env是很多常用plugins的集合，这个包里面的plugin不能满足我们的需求时候，再在下面的plugins配置我们自己的plugins

2、babel-polyfill

  • polyfill：补丁,兼容
  • core-js和regenerator
    • core-js包含es6及以上版本常见api的实现
    • regenerator是处理Generator函数的
  • babel-polyfill就是core-js和regenerator的集合

babel7.4之后弃用babel-polyfill，推荐使用core-js和regenerator；下面举个例子

  1. Promise.resolve(100).then(data => data)
  3. // 只用babel解析
  4. Promise.resolve(100).then(funciton(data) { return data; })

发现一个问题：babel把箭头函数转成了function，它只解析语法，Promise本身的语法符合ES5语法规范。
babel只解析语法（写法），无法解析API，到底能不能用。所以这时候就需要使用到babel-polyfill，来对新的API实现添加向下兼容。

按需引入

按需引入polyfill，在.babelrc里面配置preset-env

  1. {
  2.   "presets": [
  3.     [
  4.       "@babel/preset-env",
  5.       {
  6.         // 按需引入
  7.         "useBuiltIns": "usage",
  8.         // corejs版本
  9.         "corejs": 3
  10.       }
  11.     ]
  12.   ],
  13.   "plugins": []
  14. }

3、babel-runtime

babel-runtime作用是避免使用polyfill而产生的污染全局环境的问题

安装@babel/plugin-transform-runtime和@babel/runtime两个包，再对.babelrc做相应的配置，如下

  1. {
  2.     "presets": [
  3.         [
  4.             "@babel/preset-env",
  5.             {
  6.                 "useBuiltIns": "usage",
  7.                 "corejs": 3
  8.             }
  9.         ]
  10.     ],
  11.     "plugins": [
  12.         [
  13.             "@babel/plugin-transform-runtime",
  14.             {
  15.                 "absoluteRuntime": false,
  16.                 "corejs": 3,
  17.                 "helpers": true,
  18.                 "regenerator": true,
  19.                 "useESModules": false
  20.             }
  21.         ]
  22.     ]
  23. }

使用babel-runtime后，编译后结果如下图所示：
image.png
使用_includes和_promise，从而保证不污染全局环境