babel-polyfill使用疑问？求解

Question

使用webpack怎么让async/await等语法在ie8等低版本浏览器执行？今天我做了尝试，虽然可以成功但是有一些疑问希望大佬帮忙解决。

相关配置：webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    mode:'production',
    devtool:'cheap-module-source-map',
    entry:{
        main:"./src/main.js"
    },
     output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'[name]-[hash:8].js',
        publicPath:'./'
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_module/,
                use:['babel-loader']
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html'
        })
    ],
    optimization:{
        minimizer:[
            new UglifyJsPlugin({
                uglifyOptions:{
                    ie8:true
                }
            })
        ]
    }
}

.babelc

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": 3
        }]
    ],
    "plugins": [
        ["@babel/plugin-transform-modules-commonjs"],
        ["@babel/plugin-transform-runtime"]
    ]
}

所需要js执行代码

async function async1(){
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(function(){
    console.log('setTimeout')
},0)  
async1();
new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')
})
console.log('script end')

上面的配置，可以在ie9及以上执行，但是在ie8会报错如下：

查看好像是Object.create没有被转换

然后我试着把配置entry改成如下，直接页面上引用polyfill

entry:{
        polyfill:'babel-polyfill',
        main:path.resolve(__dirname,"./src/main.js")
    },

结果可以在ie8 7 完美执行；

最后我又试着把entry改回原样，在src/main.js中头部引入import 'babel-polyfill'

import 'babel-polyfill';
async function async1(){
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(function(){
    console.log('setTimeout')
},0)  
async1();
new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')
})
console.log('script end')

发现结果跟第一种情况一样，在ie8下报对象不支持“create”属性或方法;

我试着查看babel-polyfill的官网说明，发现官网是不建议使用entry: ["babel-polyfill", "./app/js"]这种方式，会让代码体积过大，但是其他两种方式又不管用，请问这是为什么？谢谢，需要怎么改？

Answer 1

import 'core-js/es6/object',按需引入的就可以了