As the title says, even I'd like to use babel-polyfill to allow me to use promises in my code, but I get that undefined error in IE11.
I've been trying to make this work for a while as I've seen that has been asked in different sites a few times, but none of the solutions really worked for me (or more accurately I was probably not able to adapt them to my code)
These are the files that, I think, are involved:
.babelrc
{
"presets": [
"es2015",
"react"
]
}
package.json: I have babel-polyfill under dev-dependencies and tried to put it under dependencies (both just manually swapping and installing it through the console) and none seemed to work
My script.js doesn't have it as import (but if I tried to import @babel-polyfill, or the different combinations with forward slash when I saw that syntax in package.json, doesn't find the module)
Finally my gulpfile.babel.js has this task:
gulp.task('build:js', ['lint'], () => {
return browserify({
entries: path.resolve(paths().source.js, 'script.js'),
extensions: ['.jsx'],
debug: true
})
.transform(babelify)
.plugin('minifyify', {
map: 'script.js.map.json',
output: path.resolve(paths().public.js, 'script.js.map.json')
})
.bundle()
.pipe(source('script.js'))
.pipe(gulp.dest(path.resolve(paths().public.js)))
.pipe(notify({
onLast: true,
message: 'Building JS done'
}));
});
What I'm doing wrong?
Thanks
Promise Usage. The promise is a constructor which accepts an executor function as a parameter. The executor function has a resolve callback, and a reject callback as its parameter. Once the Promise constructor is called, an async operation is initiated, say, an HTTP API call.
Babel includes a polyfill that includes a custom regenerator runtime and core-js. This will emulate a full ES2015+ environment (no < Stage 4 proposals) and is intended to be used in an application rather than a library/tool. (this polyfill is automatically loaded when using babel-node ).
Babel Polyfill adds support to the web browsers for features, which are not available. Babel compiles the code from recent ecma version to the one, which we want. It changes the syntax as per the preset, but cannot do anything for the objects or methods used.
You need to import Babel polyfilly before any other non-polyfill code in your JS entry point:
import 'babel-polyfill';
or if you have already switched to Babel 7:
import '@babel/polyfill';
Also note that you should switch your presets to preset-env
. I'd recommend you upgrade to Babel 7 and use @babel/preset-env
.
Assuming you have done the switch to Babel 7, this is what your .babelrc
should look like:
{
"presets": [
[ "@babel/preset-env", {
"targets": {
"browsers": [ "last 1 version", "ie >= 11" ]
}
}]
]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With