gulp-带有 babel-preset-env 的 babel 忽略浏览器列表

Question

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

在我的最小示例中，我使用 Element.remove() 并以 IE 9 为目标。然后，作为 IE 9 doesn't support that feature，我希望 Babel 将该行转换为类似 Element.parentNode.removeChild(Element) 的内容。但这并没有发生，我的 Element.remove() 行没有改变。

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

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

最小示例

在我的测试文件夹中有一个 package.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"
}

和一个gulpfile.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'));
});

script.js文件夹中的ES6文件"src"是

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

哪个 Babel（通过 Gulp 任务 js）转译到另一个 script.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 对代码的实际作用。 As per the Babel website“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*)\.remove\s*\(.*?\)\s*;/g, '.parentNode.removeChild();'))
        .pipe(gulp.dest('dist'));
});

gulp-带有 babel-preset-env 的 babel 忽略浏览器列表

gulp-babel with babel-preset-env ignores browserslist

javascript

ecmascript-6

babeljs

gulp-babel

最小示例