ES5不工作在鉻，使用Gulp

Question

我使用Gulp編譯/ uglify JavaScript，然後重新加載瀏覽器。 Gulp工作正常，但是當我在Chrome中運行JS時，我沒有得到任何錯誤，但是我的代碼仍然沒有工作。

我在jsfiddle中試過，它工作正常。有沒有人有線索，可能會導致這個問題？

我什至嘗試關閉編譯並讓它作爲ES6運行。

這是我一飲而盡文件：

/** 
* 
* 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(); 
    }); 
}); 

這裏是我的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(); 

但正如我所說的，它只是不會工作在Chrome中。

變得非常沮喪..

Answer 1

通常，當事情jsfiddle工作，但其他地方沒有，你有訪問DOM之前它準備的腳本。 jsfiddle有一個選項可以指示您的代碼何時應該執行，但默認情況下會在文檔加載後執行。所以這可以影響代碼的行爲。

檢查你的代碼，我們可以看到，構造函數訪問DOM，比如這個：

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

如果DOM是沒有準備好這將不會失敗，但它只會返回一個空節點列表進入this.getButtonOpen，這說明你沒有得到任何錯誤，但也沒有得到任何期望的行爲。

因此，要解決這個問題，做什麼jsfiddle默默的爲你做：

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

也可以考慮使用DOMContentLoaded事件，這將觸發越早：

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