Question

我有一个奇怪的问题，谷歌浏览器无法读取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编译到build文件夹，这是我的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说：

let语句声明一个块范围局部变量

比较给定的示例。这是let：

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

Answer 2

好吧，我解决了这个问题，以防万一有人遇到这个问题，您只需将babel添加到watch任务中，就像这样：

gulp.task('scripts', function() {
    return gulp.src('source/js/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(plumber())
        .pipe(gulp.dest('build/assets/js'))
});

let和const与Visual Studio和Chrome有关的问题

2 个答案: