ES5 funktioniert nicht in Chrom, mit Gulp

Question

Ich benutze Gulp zum kompilieren/uglify javascript und dann live reload browser. Gulp funktioniert gut, aber wenn ich den JS in Chrome starte, erhalte ich keine Fehler, aber mein Code funktioniert immer noch nicht.

Ich versuchte es in Jfiddle und es hat gut funktioniert. Hat jemand eine Ahnung, was dieses Problem verursachen könnte?

Ich habe sogar versucht, die Kompilation auszuschalten und es als ES6 laufen zu lassen.

Hier ist meine schluck Datei:

/** 
* 
* The packages we are using 
* 
**/ 
var gulp   = require('gulp'); 
var sass   = require('gulp-sass'); 
var browserSync = require('browser-sync'); 
var prefix  = require('gulp-autoprefixer'); 
var uglify  = require('gulp-uglify'); 
var babel  = require('gulp-babel'); 
var connect  = require('gulp-connect-php'); 




gulp.task('default',() => { 
    return gulp.src('js/*.js') 
     .pipe(babel({ 
      presets: ['es2015'] 
     })) 
     .pipe(gulp.dest('dist')); 
}); 

/** 
* 
* Styles 
* - Compile 
* - Compress/Minify 
* - Catch errors (gulp-plumber) 
* - Autoprefixer 
* 
**/ 
gulp.task('sass', function() { 
    gulp.src('sass/**/*.scss') 
    .pipe(sass({outputStyle: 'compressed'})) 
    .pipe(prefix('last 2 versions', '> 1%', 'ie 8', 'Android 2', 'Firefox ESR')) 
    .pipe(gulp.dest('css')); 
}); 

/** 
* 
* BrowserSync.io 
* - Watch CSS, JS & HTML for changes 
* - View project at: localhost:3000 
* 
**/ 
gulp.task('browser-sync', function() { 
    browserSync.init(['css/*.css', 'js/**/*.js', 'index.html'], { 
    server: { 
     baseDir: './' 
    } 
    }); 
}); 


/** 
* 
* Javascript 
* - Uglify 
* 
**/ 
gulp.task('scripts', function() { 
    gulp.src('js/**/*.js') 
    .pipe(babel({presets: ['es2015']})) 
    .pipe(gulp.dest('js-min')) 
}); 



// Connect php 

gulp.task('connect-sync', function() { 
    connect.server({}, function(){ 
    browserSync({ 
     proxy: '127.0.0.1:8000' 
    }); 
    }); 
}); 

/** 
* 
* Default task 
* - Runs sass, browser-sync, scripts and image tasks 
* - Watchs for file changes for images, scripts and sass/css 
* 
**/ 
gulp.task('live', ['sass', 'scripts', 'connect-sync'], function() { 
    gulp.watch('sass/**/*.scss', ['sass']); 
    gulp.watch('js/**/*.js', ['scripts']); 
    gulp.watch('php/**/*.php').on('change', function() { 
    browserSync.reload(); 
    }); 
}); 

Hier ist meine JS:

class ExpandArticle { 
    constructor() { 
    this.getButtonOpen = document.getElementsByClassName("col-left__button-open"); 
    this.getButtonClose = document.getElementsByClassName("col-left__button-close"); 

    this.addEventListeners = this.addEventListeners.bind(this); 
    this.expand = this.expand.bind(this); 
    this.close = this.close.bind(this); 

    if(this.getButtonOpen) 
     this.addEventListeners(); 
    } 

    expand (event) { 
    let ID = event.target.id; 

    this.getButtonOpen[ID].className += " hide"; 
    this.getButtonClose[ID].className = "col-left__button-close"; 
    document.getElementById("expand" + ID).className = "expand"; 
    document.getElementById("title" + ID).className = "move-up"; 
    document.getElementById("img" + ID).className = "col-left__img-open"; 
    } 

    close (event) { 
    let ID = event.target.id; 

    document.getElementById("expand" + ID).className = "hide"; 
    document.getElementById("title" + ID).className = ""; 
    document.getElementById("img" + ID).className = "col-left__img-close"; 
    this.getButtonOpen[ID].className = "col-left__button-open"; 
    this.getButtonClose[ID].className += " hide"; 
    } 

    addEventListeners() { 
    let that = this; 

    [].forEach.call(this.getButtonOpen, function(element) { 
     element.addEventListener('click', that.expand); 
    }); 

    [].forEach.call(this.getButtonClose, function(element) { 
     element.addEventListener('click', that.close); 
    });  
    } 
} 

new ExpandArticle(); 

Aber wie gesagt, es wird nicht nur Arbeit in Chrome.

Erste wirklich frustriert ..

Answer 1

Normalerweise, wenn die Dinge in jsfiddle arbeiten, aber nicht an anderer Stelle, haben Sie ein Skript, das das DOM zugreifen, bevor es fertig ist. jsfiddle verfügt über eine Option, die angibt, wann der Code ausgeführt werden soll, aber standardmäßig wird er ausgeführt, nachdem das Dokument geladen wurde. Dies kann beeinflussen, wie sich der Code verhält.

Inspizieren Sie den Code, sehen wir, dass der Konstruktor die DOM zugreift, zum Beispiel mit diesem:

this.getButtonOpen = document.getElementsByClassName("col-left__button-open"); 

Dies wird nicht fehlschlagen, wenn das DOM nicht bereit ist, aber es wird nur eine leere Knotenliste zurückkehren in this.getButtonOpen, was erklärt, dass Sie keine Fehler bekommen, aber auch kein gewünschtes Verhalten bekommen.

Also dieses Problem zu lösen, das tun, was jsfiddle für Sie lautlos tut:

window.onload = function() { 
    new ExpandArticle(); 
}; 

Sehen Sie sich auch das DOMContentLoaded Ereignis verwenden, die früher auslöst:

document.addEventListener('DOMContentLoaded', function() { 
    new ExpandArticle(); 
});