我有一个奇怪的问题,google chrome 无法读取 es6,例如 let
或 const
或在对象内定义函数的新方法。
如果我使用var
,它会正常工作:
var cat = {
name: 'meow',
age: 5,
eyeColor: 'black'
}
如果我使用 let
或 const
它不会工作:
let cat = {
name: 'meow',
age: 5,
eyeColor: 'black'
}
它给了我一个错误:
cat is not defined
好吧,我想出了一些办法,首先这是我的文件夹结构:
build
assets
js
app.js
vendors.js
source
js
app.js
vendors
gulpfile.js
我正在源文件夹中编写所有代码,然后将其编译到构建文件夹中,这是我的 gulp 文件(抱歉它很长):
// --------------------------------------------
// Dependencies
// --------------------------------------------
var autoprefixer = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
del = require('del'),
gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
plumber = require('gulp-plumber'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
images = require('gulp-imagemin'),
browserSync = require('browser-sync').create();
// paths
var styleSrc = 'source/sass/**/*.sass',
styleDest = 'build/assets/css/',
htmlSrc = 'source/',
htmlDest = 'build/',
vendorSrc = 'source/js/vendors/',
vendorDest = 'build/assets/js/',
scriptSrc = 'source/js/*.js',
scriptDest = 'build/assets/js/';
// --------------------------------------------
// Stand Alone Tasks
// --------------------------------------------
// Compiles all SASS files
gulp.task('sass', function() {
gulp.src('source/sass/**/*.sass')
.pipe(plumber())
.pipe(sass({
style: 'compressed'
}))
.pipe(rename({
basename: 'main',
suffix: '.min'
}))
.pipe(gulp.dest('build/assets/css'));
});
gulp.task('images', function() {
gulp.src('source/img/*')
.pipe(images())
.pipe(gulp.dest('build/assets/img'));
});
// Uglify js files
gulp.task('scripts', function() {
gulp.src('source/js/*.js')
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest('build/assets/js'));
});
//Concat and Compress Vendor .js files
gulp.task('vendors', function() {
gulp.src(
[
'source/js/vendors/jquery.min.js',
'source/js/vendors/*.js'
])
.pipe(plumber())
.pipe(concat('vendors.js'))
.pipe(uglify())
.pipe(gulp.dest('build/assets/js'));
});
// Watch for changes
gulp.task('watch', function(){
// Serve files from the root of this project
browserSync.init({
server: {
baseDir: "./build"
},
notify: false
});
gulp.watch(styleSrc,['sass']);
gulp.watch(scriptSrc,['scripts']);
gulp.watch(vendorSrc,['vendors']);
gulp.watch(['build/*.html', 'build/assets/css/*.css', 'build/assets/js/*.js', 'build/assets/js/vendors/*.js']).on('change', browserSync.reload);
});
// use default task to launch Browsersync and watch JS files
gulp.task('default', [ 'sass', 'scripts', 'vendors', 'watch'], function () {});
当我直接在构建js文件中编写代码时,它工作正常,但如果我在源文件夹中编写js,它只会编译var,但如果我尝试let或const,它不会编译
最佳答案
使用let
改变了变量cat
的范围。声明时并未生成错误(打开 Chrome 控制台并粘贴示例以向自己证明这一点)。
The
let
statement declares a block scope local variable
比较给定的示例。这是让
:
let x = 1;
if (x === 1) {
let x = 2;
console.log(x);
// expected output: 2
}
console.log(x);
// expected output: 1
这是var
:
var x = 1;
if (x === 1) {
var x = 2;
console.log(x);
// expected output: 2
}
console.log(x);
// expected output: 2
注意到每个示例的第一个和第二个输出的差异了吗?简而言之,错误实际上是在尚未共享的代码中。此示例突出显示了差异:
if (true) {
var myVariable = 1;
let myOtherVariable = 2;
}
console.log(myVariable); //Outputs '1'
console.log(myOtherVariable); //Fails
关于javascript - Visual Studio 和 Chrome 的 let 和 const 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53150442/