Question

我有一个要缩小的JavaScript代码。我正在使用gulp任务来做到这一点：

...
gulp.task('app.js', () => {
    return gulp.src('src/assets/js/*.js')
        .pipe(babel({presets: ['env']}))
        .pipe(uglify())
        .pipe(gulp.dest('src/public/js'))
})
...

但是我注意到，当我尝试访问使用此缩小的javascript加载html的页面时遇到了javascript错误：

Uncaught ReferenceError: stringClasses is not defined
    at newElement (jv.js:1)
    at new Screen (jv.js:1)
    at HashGame (jv.js:1)
    at jv.js:1

因此，我认为这是uglify()函数中的问题，请删除uglify步骤，但问题仍然存在（所以问题是babel）：

Uncaught ReferenceError: stringClasses is not defined
    at newElement (jv.js:12)
    at new Screen (jv.js:137)
    at HashGame (jv.js:153)
    at jv.js:162

原始的newElement函数是：

function Item(id){
    this.elem = newElement('div', 'item', 'pencilBorder')
    this.elem.id = id
    this.play = (checker) => {
        if (!this.elem.attributes.filled){
            this.elem.innerHTML = 'X'
            this.elem.attributes.value = 'X'
            this.elem.setAttribute("filled", true)
            if (!checker.check()){
                robotPlay()
                checker.check()
            }
        }
    }
    this.elem.onclick = (e) => {
        this.play(new Checker())
    }
}

而babel将其更改为：

function newElement(tagName) {
    var elem = document.createElement(tagName);

    for (var _len = arguments.length, classNames = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        classNames[_key - 1] = arguments[_key];
    }

    stringClasses = classNames.reduce(function (ac, current) {
        return ac + " " + current;
    });
    elem.className = stringClasses;
    return elem;
}

我已经搜索了babel选项并尝试了新的预设，但是没有任何效果。有人知道如何解决吗？

Answer 1

所以我发现了问题：这是我的函数newElement。

我在它之前声明了没有var / let或const的stringClasses变量，如果我不使用babel的话，它可以工作。但是，当babel在es2015上更改它时，就会出现问题。

如何避免babel的“未捕获的ReferenceError：未定义stringClasses”？

1 个答案: