javascript - ES5 无法在 Chrome 中运行，使用 Gulp

Question

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

我在jsfiddle中尝试过，效果很好。有谁知道什么可能导致这个问题？

我什至尝试关闭编译并让它以 ES6 运行。

这是我的 gulp 文件:

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