babel-polyfill和babel-runtime区别

babel-polyfill做的事情

babel默认不会转换新的api如Array.from，Promise，Proxy等全局对象。需要通过babel-polyfill往全局对象和内置方法原型上添加方法来实现。缺点是会污染全局空间

// babel配置
{
    presets:[
        ['@babel/preset-env', {
            useBuildIns: 'entry'
            corejs: {
                version: 3
            },
            target: '> 0.25%, not dead'
        }]
    ]
}

useBuildIns:false全量引入polyfill useBuildIns:entry根据配置的浏览器兼容性引入polyfill。需要手动在入口手动添加import '@babel/ployfill'且需要指定corejs版本号.如果corejs为3,则引入需改成import 'core-js/stable';import 'regenerator-runtime/runtime'useBuildIns:useage跟据浏览器兼容性和代码中使用到的api,来按需引入polyfill

babel-runtime

解决babel-polyfill全局空间污染问题

babel-plugin-transform-runtime

自动引入babel-runtime下的工具函数有这个插件后。预设里useBuildIns和corejs这部分代码可以不需要了

{
    presets:[
        ['@babel/preset-env', {
            target: '> 0.25%, not dead'
        }]
    ],
    plugins:[
        [
            '@babel/plugin-transform-runtime',
            {
                corejs: 3,
                helpers: true, // 将公共的工具函数提取出来，如类的继承
                regenerator: true // 生成器语法工具提取成公共的
            }
        ]
    ]
}

最佳实践

babel-runtime适合类和组件库。babel-polyfill适合项目里用，因为polyfill体积小