我正在使用 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 中不起作用。
真的很沮丧..
最佳答案
通常,当在 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();
});
关于javascript - ES5 无法在 Chrome 中运行,使用 Gulp,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42888127/