Can't get es6 to work with Gulp

This is driving me insane, so I'm hoping someone might see something that I'm missing. Thank you for your help in advance.

I have a gulp file and I have installed via npm, babel-core, babel-preset-es2015, babel-preset-react. From researching online and in high hopes even though this might not be right, I have renamed the gulp file to be gulpfile.babel.js and I have created a .babelrc file with

{
  "presets": ["es2015"]
}

I am using browsersync and when I launch the gulp task the html file loads, but the index.js I have includes 'import React....'. This files causing the error in the JS console that says 'Uncaught SyntaxError: Unexpected token import'.

I thought the es2015 npm packages I have should be taking care of that ES6 syntax?

In the gulp file the task that I thought was suppose to take care of that is;

// convert jsx to JS
gulp.task('babelFiles', function() {
    return gulp.src('js/*.(jsx|js)')
        .pipe(babel({
            compact: false
            }))
        .pipe(gulp.dest('js'))
        .pipe(browserSync.reload({
            stream: true
        }))
});

The gulp task that is responsible for launching this is:

// Default task
gulp.task('default', ['babelFiles', 'browserSync']);

I am puzzled as to what could be wrong here?

Any ideas would be much much appreciated!

There are two problems:

gulp.src('js/*.(jsx|js)') // not working
gulp.src('js/*.{js,jsx}') // working

Update

Gulp uses glob syntaxt to match files - according to glob syntax the qualifier for amount of items should be included before ( | ) - in our case following syntax would be valid

gulp.src('js/*.@(js|jsx)')

where @ means match exactly one occurrence of pattern after @ .

In your case there was no qualifier presented

上一篇: Kubernetes Minikube与本地永久存储

下一篇: 无法使es6与Gulp一起工作