Gulp-Uglify: $(void 0) при кэшировании DOM

При использовании gulp-uglify и кэшировании элементов DOM (с помощью jQuery) uglify делает $(void 0) из $(this).

$(document).on("click", "sth", () => {
    var $this = $(this);
    ...
});

Приведет к этому:

$(document).on("click", "sth", function() {
    var e = $(void 0);
    ...
});

Как я могу предотвратить это?


javascript jquery gulp gulp-uglify
person sandrooco    schedule 16.01.2017    source источник
comment
Это не минимально воспроизводимый пример. Если у вас есть проблема с задачей gulp, опубликуйте задачу gulp. Мы не можем предположить, как это выглядит. Запас gulp-uglify не поддерживает функции стрелок, поэтому вы используете либо babel, либо UglifyJS2, но узнать это невозможно.   -  person Sven Schoenung    schedule 16.01.2017

Ответы (1)


arrow_upward
1
arrow_downward

Стрелочные функции не привязываются к this:

Стрелочная функция не создает свой собственный контекст this, поэтому this имеет исходное значение из окружающего контекста.

Это означает, что this в вашем примере относится к this окружающей области. Поскольку ваша функция стрелки не находится внутри другой функции, this относится к глобальному this.

В браузере глобальный this относится к window объекту< /а>. Однако я предполагаю, что вы используете babel с пресетом babel-preset-es2015. В этом случае babel будет считать, что ваш код находится внутри модуля ES6. . Внутри модуля ES6 значение this равно undefined.

Это означает, что babel() перенесет этот код:

var $this = $(this);

В этот код:

var $this = $(undefined);

Далее у вас есть uglify(), который пытается максимально сжать приведенную выше строку. С этой целью он использует тот факт, что void 0 оценивается как undefined, а поскольку void 0 короче, чем undefined вы получите следующее:

var e = $(void 0);

Как это исправить? Легкий. Не используйте функцию стрелки:

$(document).on("click", "sth", function() {
    var $this = $(this);
    ...
});
person Sven Schoenung    schedule 16.01.2017