如何使用babel 7填充Promise.any()? [英] How do I polyfill Promise.any() using babel 7?

问题描述

我使用webpack为我的客户捆绑我的代码.根据我在这里的问题承诺.任何.但是我不知道我做错了什么，现在有了Babel 7 polyfill，我什至无法实现Promise.任何适用于Chrome85 +的工具都可以！

以下是我所做的

首先，我的webpack.config.js

  module.exports = {入口: {索引:"./src/index.js"ui:"./src/ui/index.js"}，输出: {路径:path.resolve(__ dirname，'./dist')，文件名:"[name] .js"，libraryTarget:'umd'，libraryExport:'默认'，umdNamedDefine:true，库:"[名称]"}，模块: {规则:[{测试:/\.js $/，排除:/node_modules/，用: {加载程序:"babel-loader"}}，...} 

我最初使用Babel6.通过Babel 6，我可以验证webpack捆绑的代码(使用Promise.any)适用于Chrome 85+(可能根本没有填充Promise.any).

然后我使用 npx babel-upgrade --write 并稍加改动(例如，"useBuiltIns":'usage')将Babel 6升级到Babel 7.webpack可以捆绑我的代码，但是令我惊讶的是，带有 Promise.any()的捆绑代码甚至无法在Chrome85 +上运行.我收到错误消息"未捕获(承诺)"

以下是我的babelrc

  {"env":{生产":{预设":[["@ babel/preset-env"，{目标":{浏览器":[最近的4个Chrome版本"，最近的3个Firefox版本"，]}，模块":"commonjs"，调试":是的，"useBuiltIns":用法"}]]，插件":[["@ babel/plugin-transform-runtime"，{"corejs":2再生器":true}]]}}} 

我做错了什么?

解决方案

我打开了一个问题针对core-js，作者告诉我，我不应该使用core-js @ 2.有了这个指针，我终于使它与core-js @ 3一起使用了！

以下是我的 .babelrc .要点是在

或

中设置 corejs3 或在"@ babel/plugin-transform-runtime"中，但不能两者都.使通天塔工作如此困难，以至于我在这里列出了我的.babelrc，而且我不确定我是否设置正确.

 "production":{预设":[["@ babel/preset-env"，{"targets":{...}，模块":"commonjs"，"useBuiltIns":用法"，"corejs":{版本":3，建议":正确}}]]，插件":[["@ babel/plugin-transform-runtime"，{再生器":true//或者不使用BuiltIns，但是在这里//"corejs":{//版本":3，//"proposals":true//}}]]} 

使用此设置，我可以看到webpack输出，然后polyfill终于可以工作了！

 添加了以下core-js polyfills:esnext.aggregate-error {"chrome":"78"，"ie":"10"，"safari":"13.1"；}esnext.promise.any {"chrome":"78"，"ie":"10"，"safari":"13.1"}... 

I use webpack to bundle my codes for my clients. According to my question here Is it possible to break away from await Promise.all when any promise has fulfilled (Chrome 80) I want to use Promise.any() but Promise.any is only available for Chrome85+ and my clients need me to support Chrome 80+. Naturally I had thought with babel I can polyfill Promise.any(), e.g. corejs provides Promise.any. But I don't know what I did wrong, now with Babel 7 polyfill I can't even make Promise.any work for Chrome85+!

Following is what I have done,

First, my 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'
                }
            },
   ...
}

I initially used Babel 6. With Babel 6 I can verify the code (using Promise.any) bundled by webpack works for Chrome 85+ (probably it didn't polyfill Promise.any at all).

I then upgrade Babel 6 to Babel 7, using npx babel-upgrade --writeand with some twists (e.g. "useBuiltIns": 'usage'). webpack can bundle my code then, but to my surprise the bundled code with Promise.any() can't even work on Chrome85+. I got the error message "Uncaught (in promise) rejected"

The following is my 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
                    }
                ]
            ]
        }
    }
}

What did I do wrong ?

解决方案

I opened an issue against core-js and the author told me I should not use core-js@2. With that pointer I finally made it work with core-js@3!

Following is my .babelrc. The main point is to set corejs3 either in "presets" or in "@babel/plugin-transform-runtime" , but not both. Making babel work is so hard that I list my .babelrc here and I am not sure I have set everything right.

"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
                        // }
                    }
                ]
            ]
        }

With this setting I can see the webpack output like and polyfill finally works!

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" }
  ...

这篇关于如何使用babel 7填充Promise.any()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！