Question

我正在试图用Babel使用gulp-babel来转换一些ES2015代码，但Babel似乎忽略了我的browserslist。 Babel转换了一些现代功能，但并不是所有目标浏览器都需要的功能。

在我的最小例子中，我使用Element.remove()并定位IE 9.然后，作为IE 9 doesn't support that feature，我希望Babel将该行转换为类似Element.parentNode.removeChild(Element)的行。但这不会发生，而我的Element.remove()行不会改变。

如果我在.browserslistrc文件中输入我的browserslist，或者只是完全删除我的browserslist，结果就不会改变。

由于这是我第一次尝试编写代码，我想我可能会误解为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实际上对代码做了什么。 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, '$1.parentNode.removeChild($1);'))
        .pipe(gulp.dest('dist'));
});

使用babel-preset-env的gulp-babel会忽略browserslist

最小的例子

1 个答案: