带有 babel-preset-env 的 gulp-babel 忽略了 browserslist

Question

我正在尝试使用 gulp-babel 用 Babel 转译一些 ES2015 代码，但 Babel 似乎忽略了我的浏览器列表。Babel 转译了一些现代功能，但不是针对指定浏览器所需的全部功能。

在我的最小示例中，我使用Element.remove()和目标 IE 9。然后，由于IE 9不支持该功能，我希望Babel将该行转换为类似Element.parentNode.removeChild(Element)。但这不会发生，相反，我的Element.remove()线没有改变。

如果我在.browserslistrc文件中输入浏览器列表或只是完全删除浏览器列表，结果不会改变。

由于这是我第一次尝试转译代码，我想我可能只是误会了 Babel 实际上应该做什么。

最小示例

在我的测试文件夹中，我有一个包.json

{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.0.0-beta.51",
"@babel/preset-env": "^7.0.0-beta.51",
"gulp": "^3.9.1",
"gulp-babel": "^8.0.0-beta.2"
},
"browserslist": "IE 9"
}

和古尔普文件.js

const gulp = require('gulp'),
babel = require('gulp-babel');
gulp.task('js', function() {
return gulp.src('src/script.js')
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(gulp.dest('dist'));
});

ES6 文件脚本.js在 "src" 文件夹中是

window.addEventListener('load', () => {
const myId = 'test';
const myDiv = document.getElementById(`${myId}`);
myDiv.remove();
});

Babel(通过 Gulp 任务js(转译到另一个脚本.js(在"dist"文件夹中(

"use strict";
window.addEventListener('load', function() {
var myId = 'test';
var myDiv = document.getElementById("".concat(myId));
myDiv.remove();
});

因此，箭头函数被普通函数替换，const更改为var，模板文本更改为常规字符串串联，但remove()保持不变。

我在这里做错了什么吗？还是仅仅是我对 Babel 的期望太高了？

Answer 1

我误会了 Babel 实际上用代码做什么。根据 Babel 网站"Babel 只转换语法"，因此观察到的行为正是应该预期的。

我想那里有更聪明的解决方案(例如 Polyfill.io(，但现在我正在用 gulpfile 中的正则表达式解决这些问题.js通过gulp-replace

const gulp = require('gulp'),
babel = require('gulp-babel'),
replace = require('gulp-replace');
gulp.task('js', function() {
return gulp.src('src/script.js')
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(replace(/(S*).removes*(.*?)s*;/g, '$1.parentNode.removeChild($1);'))
.pipe(gulp.dest('dist'));
});