如何使用Babel 7进行Polyfill Promise.any()？

Question

我使用webpack为我的客户打包代码。根据我的问题（Chrome 80）是否有可能在任何承诺得到满足时摆脱等待Promise.all，我想使用Promise.any()，但是Promise.any仅适用于Chrome 85+，我的客户需要我支持Chrome 80+。自然地，我认为通过babel我可以polyfill Promise.any()，例如corejs提供了Promise.any。但是我不知道哪里做错了，现在使用Babel 7 polyfill，我甚至无法使Promise.any在Chrome85+中正常工作！

接下来是我所做的事情，

首先，我的webpack.config.js：

module.exports = {
    entry: {
        index: './src/index.js'
        ui:'./src/ui/index.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].js',
        libraryTarget: 'umd',
        libraryExport: 'default',
        umdNamedDefine: true,
        library: '[name]'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
   ...
}

我最初使用的是Babel 6。使用Babel 6时，我可以验证由webpack捆绑的代码（使用Promise.any）适用于Chrome 85+（可能根本没有对Promise.any进行polyfill）。

然后我将Babel 6升级到Babel 7，使用npx babel-upgrade --write，并进行了一些调整（例如"useBuiltIns": 'usage'）。然后webpack可以捆绑我的代码，但令我惊讶的是，带有Promise.any()的捆绑代码甚至无法在Chrome85+上运行。我收到了错误消息“未捕获的（在promise中）拒绝”

以下是我的babelrc文件

{
    "env": {
        "production": {
            "presets": [
                [
                    "@babel/preset-env",
                    {
                        "targets": {
                            "browsers": [
                                "last 4 Chrome versions",
                                "last 3 Firefox versions",
                            ]
                        },
                        "modules": "commonjs",
                        "debug": true,
                        "useBuiltIns": 'usage'
                    }
                ]
            ],
            "plugins": [
                [
                    "@babel/plugin-transform-runtime",
                    {
                        "corejs": 2,
                        "regenerator": true
                    }
                ]
            ]
        }
    }
}

我错在哪里了？

- Qiulang

Answer 1

我在core-js上开了一个问题，作者告诉我不应该使用core-js@2。有了这个指针，我最终通过core-js@3使其正常工作！

以下是我的.babelrc文件。主要是在“预设”或“@babel/plugin-transform-runtime”中设置corejs3，但不能都设置。使babel正常工作是如此困难，我在这里列出我的.babelrc文件，我不确定是否设置了一切正确。

"production": {
            "presets": [
                [
                    "@babel/preset-env",
                    {
                        "targets": { ... },
                        "modules": "commonjs",
                        "useBuiltIns": "usage",
                        "corejs": {
                            "version": 3, 
                            "proposals": true
                        }
                    }
                ]
            ],
            "plugins": [
                [
                    "@babel/plugin-transform-runtime",
                    {
                        "regenerator": true
                        //or don't useBuiltIns but here
                        // "corejs": {
                        //     "version": 3,
                        //     "proposals": true
                        // }
                    }
                ]
            ]
        }

通过这个设置，我可以看到 webpack 的输出，同时 polyfill 最终也起作用了！

Added following core-js polyfills:
  esnext.aggregate-error { "chrome":"78", "ie":"10", "safari":"13.1" }
  esnext.promise.any { "chrome":"78", "ie":"10", "safari":"13.1" }
  ...

- Qiulang