Gulp & Babel polyfill Promises for IE11 问题
Gulp & Babel polyfill Promises for IE11 issue
我有一个用 Angular.js 编写的旧项目。我需要为 IE11 填充 promises,但它不起作用。
在 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 对象。
我被卡住了,不知道我还能做什么。
我在 promise-polyfill 上取得了很好的成功。只要它在您的 promise 特定代码之前加载,它就应该可以正常工作。我知道这不是特定于 babel 的,但是当我仍然必须支持 IE 时,它解决了我的 IE 兼容性问题。
简单的解决方案是将 @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"
,那您就完蛋了。如果你的浏览器目标配置错误,那你也很操蛋。
这两个来源解释得更详细:
我有一个用 Angular.js 编写的旧项目。我需要为 IE11 填充 promises,但它不起作用。
在 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 对象。
我被卡住了,不知道我还能做什么。
我在 promise-polyfill 上取得了很好的成功。只要它在您的 promise 特定代码之前加载,它就应该可以正常工作。我知道这不是特定于 babel 的,但是当我仍然必须支持 IE 时,它解决了我的 IE 兼容性问题。
简单的解决方案是将 @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"
,那您就完蛋了。如果你的浏览器目标配置错误,那你也很操蛋。
这两个来源解释得更详细: