如何使用babel 7填充Promise.any() ?

Question

我使用webpack为我的客户端捆绑我的代码。根据我的问题，有可能摆脱等待的承诺吗?当任何承诺已经实现(Chrome 80)，我想使用Promise.any()，但Promise.any只适用于Chrome85+，我的客户需要我支持Chrome 80+。当然，我认为我可以用babel填充Promise.any()，例如corejs提供Promise.any。但我不知道我做错了什么，现在有了巴别塔7的填充物，我甚至不能做出承诺。任何工作为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)。

我然后升级Babel 6到Babel 7，使用npx babel-upgrade --write和一些曲折(例如"useBuiltIns": 'usage')。webpack可以捆绑我的代码，但令我惊讶的是，与Promise.any()捆绑的代码甚至不能在Chrome85+上工作。我收到错误消息">未捕获(在承诺中)被拒绝">

以下是我的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
}
]
]
}
}
}

我做错了什么?

Answer 1

我打开了core-js的问题，作者告诉我不应该使用core-js@2。有了那个指针，我终于使它与core-js@3工作!

以下是我的.babelrc。重点是设置corejs3要么在"预设"中;或者在"@babel/plugin-transform-runtime" 让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" }
...