javascript - Visual Studio 和 Chrome 的 let 和 const 问题

Question

我有一个奇怪的问题，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，它不会编译

Answer 1

使用let改变了变量cat的范围。声明时并未生成错误(打开 Chrome 控制台并粘贴示例以向自己证明这一点)。

MDN documentation for let说:

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