Javascript ES5不在铬合金中工作，使用Gulp

我正在使用Gulp编译/uglify javascript，然后实时重新加载浏览器。 Gulp运行得很好，但是当我在Chrome中运行JS时，我没有收到任何错误，但是我的代码仍然不工作

我在JSFIDLE中试用过，效果很好。有人知道是什么导致了这个问题吗

我甚至尝试关闭编译，让它作为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中无法工作

---

非常沮丧..

通常，当事情在

jsfiddle

中工作，但在其他地方不工作时，您有一个脚本可以在DOM准备好之前访问它

jsfiddle

有一个选项来指示代码应该在什么时候执行，但默认情况下，它会在加载文档后执行。因此，这可能会影响代码的行为

检查代码时，我们看到构造函数访问DOM，例如：

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

如果DOM没有准备好，这不会失败，但它只会在

This.getButtonOpen

中返回一个空节点列表，这说明您不会得到任何错误，但也不会得到任何期望的行为

要解决这个问题，请做

jsfiddle

为您默默做的事情：

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

还考虑使用<代码> DOMCONTENTROND加载事件，它触发得更快：

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

---

您可能太早执行了

newexpandarticle

。尝试

window.onload=function（）{new ExpandArticle（）}这是一个技巧，但很奇怪，我认为当我使用事件侦听器时，调用函数的时间不应该应用。