简述

babel能把es6+转换成es5代码，有两方面转换，一是对语法的转换，比如箭头函数class语法、async语法等。二是对新的api比如数组和字符串上新添加的方法。

组成

babel是由@babel/core 为主，通过一系列plugin来完成转换。

配置

babel通过项目根目录下的配置文件处理一般都用babel.config.js 或 .bebelrc，两个区别是js需要按照js文件格式导出，rc文件只用写一个对象即可。

presets

一系列已经配置好的插件合集，通过对外暴露options来对内部plugin进行配置。presets的是由后往前解析的，意味申明在后面的preset会先执行，每一个preset其实就是一个返回bable配置对象的函数。

exports.myCustomPreset = (presetOptions) => {
    return {
        presets: ["@babel/preset-xxx"],
        plugins: ["@babel/plugin-xx"]
    }
}

plugins

对于同一段代码的解析，由前往后。配置方式和presets一样，plugin总优先于presets中的插件先执行。

module.exports = {
    plugins: [
        ['@babel/plugin-runtime-transform', {
            xx: xx
        }]
    ]
}

@babel/preset-env

• targets 直接配置target属性，默认使用项目下browserlist文件（建议使用）
• useBuiltIns: 'entry',引入浏览器不支持的全部polyfill，即使未在代码中使用。 'usage'，在各个使用的地方应用，可能会存在重复的情况
• corejs: 3

bebel/preset-env 和 @bebel/plugin-transform-runtime

配置targets后，preset-env查询targets所支持的特性，过滤出生效的插件，每个插件在声明时需要指定能够生效的浏览器

polyfil主要包含3个方面的内容

• corejs，对高级api的支持，比如Object.defineProperty 这一类的api。或者在原型添加某些方法，比如数组新增的那些方法
• 各种helper函数，比如箭头函数和class语法，生成各种helper函数。
• regenerator，对async语法糖进行转换

preset-env对polyfill的处理是，corejs和regenerator全局注入，helper在模块注入（在模块现场申明一个helper，和transform-runtime区别在transform-runtime的helper是由corejs导出的，每个地方都可以复用），这样会污染全局环境。

@bebel/plugin-transform-runtime 将全局的注入全部改成模块的注入。缺点是不支持target，总是会做polyfill操作。

得到一个最终的版本

module.exports = {
    plugins: [
        ['transform-runtime', {
            corejs: 3
        }]
    ],
    presets: [
        ['env', {
            corejs: 3,
            useBuiltIns: 'usage'
        }]
    ]
}

执行实现配置文件

导出配置文件即可，在需要引用的地方extends合并。需要注意的时，preset文件中不能包含extends