如何使用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
.要点是在
"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 --write
and 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屋!