IE11 问题的 Gulp & Babel polyfill Promises答案

【问题标题】：Gulp & Babel polyfill Promises for IE11 issueIE11 问题的 Gulp & Babel polyfill Promises
【发布时间】：2021-03-12 10:19:03
【问题描述】：

我有一个用 Angular.js 编写的旧项目。我需要为 IE11 填充 promise，但它不起作用。

在 gulpfile.js 中我需要 Babel 的东西

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'),

我在这里使用管道

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());
};

代码在 chrome 上构建并运行，但在 IE11 上仍然存在问题，这意味着它没有填充 Promise 对象。

我被困住了，不知道我还能做什么。

【问题讨论】：

这里有同样的问题 - 在一个旧项目上做一些工作，并且有一个非常相似的 gulp 设置。输出文件确实替换了箭头函数，但不替换或 polyfil Array.prototype.includes
我可以为这个方法手动添加一个 polyfil，但我希望 babel 能够处理它，并且不想手动修补我添加的任何其他 ES2015 方法

标签： javascript babeljs babel-polyfill core-js gulp-babel

【解决方案1】：

我在promise-polyfill 上取得了很好的成功。只要在您的特定于承诺的代码之前加载它，它就应该可以工作。我知道这不是特定于 babel 的，但是当我仍然必须支持 IE 时，它解决了我的 IE 兼容性问题。

【讨论】：

不是 Babel 解决方案，但它有效！谢谢。

【解决方案2】：

简单的解决方案是将@babel/preset-env 选项useBuiltIns 从"entry" 更改为"usage"。另外，您需要确保您的浏览器目标设置正确。 "ie >= 11" 相对较新，可能根本不需要 polyfil。

关于“为什么”部分，简而言之

useBuiltIns: "usage" 表示：在每个需要的文件中自动导入polyfil代码
useBuiltIns: "entry" 表示：只检查我的入口文件，看看我是否手动导入 "core-js/stable" 和"regenerator-runtime/runtime" 模块。如果我这样做了，请微调我的导入以适应浏览器目标的需要

总而言之，如果你在使用useBuiltIns: "entry" 并且忘记在你的入口文件中手动导入"core-js/stable" 和"regenerator-runtime/runtime"，那你就完蛋了。如果你把浏览器的目标配置错了，那你也完蛋了。

这两个来源解释得更详细：

【讨论】：