@babel/polyfill vs @babel/runtime vs @babel/preset-env

概述

---

@babel/polyfill  & @babel/runtime 只做 API 的转换，不做语法转换。语法转换需要 @babel/preset-env。

@babel/polyfill

---

@babel/polyfill 顾名思义是垫片的意思，polyfill 会在原有的JS内置对象及方法上做向后兼容的处理。

使用方法：

第一步：安装 @babel/polyfill （记住必须是--save，因为垫片方法最后需要被打包到代码中）

npm install --save @babel/polyfill

第二步：在入口文件中引入 @babel/polyfill 

import '@babel/polyfill';

优势：

1、功能齐全

劣势：

1、代码体积大

2、污染全局，跟一些第三方包一起使用的时候可能会有冲突

@babel/runtime

---

@babel/runtime更像是一种按需加载的实现，比如你哪里需要使用 Promise，只要在这个文件头部 import Promise from '@babel/runtime/core-js/promise'。

那么问题来了，如果你许多文件都要使用 Promise，难道每个文件都要 import 一遍不成？Babel 官方已考虑这种情况，只需要使用 @babel/plugin-transform-runtime 就可以解决手动 import 的苦恼了。

问题又来了，如何使用@babel/plugin-transform-runtime呢？使用的方法也很简单，我们可以在babel的配置文件添加相应的配置："plugins":["transform-runtime"]

总的来说，@babel/plugin-transform-runtime 就是可以在我们使用新 API 时自动 import @babel/runtime 里面的 polyfill，具体插件做了以下三件事情：

1、当我们使用 async/await 时，自动引入 @babel/runtime/regenerator

2、当我们使用 ES6 的静态事件或内置对象时，自动引入 @babel/runtime/core-js

3、移除内联babel helpers并替换使用@babel/runtime/helpers 来替换

优势

1、不会污染全局变量

2、依赖统一按需引入

3、避免 babel 编译的工具函数在每个模块里重复出现，减小库和工具包的体积

劣势

1、不支持实例化的方法扩展

@babel/preset-env

---

babel-preset-env 是一些 babel 插件的集成，可以实现语法转换。在完成语法转换的同时，我们还可以通过配置引入需要的垫片方法，做到按需引入:

presets: [

    [

        '@babel/env', // @babel/preset-env 的缩写

        {

            targets: { // 目标浏览器

                edge:'17',

                firefox:'60',

                chrome:'67',

                safari:'11.1',

                ie:'9'

              },

              useBuiltIns: 'usage', // 按需引入,不许手动引入额外东西，打包出的数据按需引入模块

              corejs: {

                version:3

              }

        }

    ]

]

注意：加了上面的配置以后，别忘了安装 corejs 模块，corejs 模块得通过 --save的模式安装！

如果@babel/plugin-transform-runtime也配置了corejs, 则preset-env的useBuiltIns就不会生效，以@babel/plugin-transform-runtime的配置为主，具体配置如下：

plugins: [

    [

        '@babel/plugin-transform-runtime',

        corejs: {

            version:3

        }

    ]

]

结语

---

至此我们已经讲明白了三者的异同，当然 babel 还有很多的内容值得我们去研究，大家继续加油吧！