帶有babel-preset-env的gulp-babel會忽略瀏覽器列表

Question

我正在嘗試使用gulp-babel與Babel轉換一些ES2015代碼，但是Babel似乎忽略了我的瀏覽器列表。 Babel繼承了一些現代功能，但並非所有針對指定瀏覽器所需的功能。

在我的最小示例中，我使用Element.remove()和目標IE9。然后，由於IE 9不支持該功能 ，我希望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'));
});

“ src”文件夾中的ES6文件script.js是

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()保持不變。

我在這里做錯什么了嗎？ 還是僅僅是我對巴別塔的期望過高？

Answer 1

我誤解了Babel實際上對代碼做了什么。 根據Babel網站的 “ Babel僅轉換語法”，因此觀察到的行為恰恰是應有的預期。

我猜那里還有更聰明的解決方案（例如Polyfill.io），但是現在我正在gulpfile.js中通過正則表達式使用gulp 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, '$1.parentNode.removeChild($1);'))
        .pipe(gulp.dest('dist'));
});