babel-polyfill使用疑问?求解

梦幻灬韶华
  • 224

使用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会报错如下:

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

clipboard.png

然后我试着把配置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"]这种方式,会让代码体积过大,但是其他两种方式又不管用,请问这是为什么?谢谢,需要怎么改?

回复
阅读 1.8k
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏