Gulp & Babel polyfill Promises for IE11 issue

Question

I have an old project written in Angular.js. I need to polyfill promises for IE11 but it's not working.

In gulpfile.js I have requires for Babel stuff

var corejs = require('core-js/stable'),
    regenerator = require('regenerator-runtime/runtime'),
    presetEnv = require('@babel/preset-env'),
    concat = require('gulp-concat'),
    gulp = require('gulp'),
    babel = require('gulp-babel'),
    babelRegister = require ('@babel/register'),

And here I am using the pipe

var envJS = function () {
    var condition = (config[environment].compression);
    return gulp.src(paths.appJS)
        .pipe(babel(
            {
                "presets": [
                    [ "@babel/preset-env", {
                      "targets": {
                          "browsers": ["ie >= 11"]
                      },
                      "useBuiltIns": "entry",
                      "corejs": 3 
                    }]
                  ]
            }
        ))
        .pipe(ngAnnotate())
        //.pipe(gulpif(!condition, jshint()))
        //.pipe(gulpif(!condition, jshint.reporter('default')))
        .pipe(addStream.obj(prepareTemplates()))
        .pipe(configServer())
        .pipe(gulpif(condition, uglify({mangle: true})))
        .pipe(concat(randomNames.js))
        .pipe(gulp.dest(folderDist))
        .pipe(connect.reload());
};

The code builds and works on chrome but still have the issue on IE11 which means it's not polyfilling the Promise object.

I am stuck and don't have any ideas what else should I do.

Answer 1

I have had good success with promise-polyfill. As long as that loads before your promise-specific code, it should just work. I know that's not babel-specific, but it solved my IE-compatibility woes back when I still had to support IE.

Answer 2

The easy solution is to simply change @babel/preset-env option useBuiltIns from "entry" to "usage". Plus, you need to make sure your browser target setting is correct. "ie >= 11" is relatively up-to-date and might not need polyfil at all.

As of the "why" part, well, in short

• useBuiltIns: "usage" means: automatically import polyfil code in each file that needs it
• useBuiltIns: "entry" means: check my entry file only and see if I manually import "core-js/stable" and "regenerator-runtime/runtime" modules. If I do, fine tune my import to fit the browser target’s need

To sum up, if you’re using useBuiltIns: "entry" and forget to manually import "core-js/stable" and "regenerator-runtime/runtime" in your entry file, you’re fcked. If you config your browser target wrong, you’re fcked too.

These two sources explain in more details:

• https://babeljs.io/docs/en/babel-preset-env#usebuiltins-entry
• https://stackoverflow.com/a/56505264/3617380