gulp-babel change es6 to es5 require is not undefined

Question

gulpfile.js

gulp.task('es6', function() {
    gulp.src('libs/es6/*.js')
    .pipe(babel())
    .pipe(gulp.dest('libs/js'))
        .pipe(concat('all.js'))
        .pipe(gulp.dest('libs/dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('libs/dist'));
});

.babelrc

{
  "presets": ["es2015"]
}

use gulp-babel transform es6 to es5 then get error: Uncaught ReferenceError: require is not defined. I have try to config .babelrc

{
  "presets": ["es2015"],
  "plugins": ["babel-plugin-transform-es2015-modules-amd"]
}

but still get the error define is not defined. then how to make es6 transform es5 can normal in browser?

Answer 1

Try changing your .babelrc file back to:

{
  "presets": ["es2015"]
}

Now change your gulpfile.js to:

gulp.task('es6', function() {
    gulp.src('libs/es6/*.js')
    .pipe(babel({
        plugins: 'babel-plugin-transform-es2015-modules-amd'
    }))
    .pipe(gulp.dest('libs/js'))
        .pipe(concat('all.js'))
        .pipe(gulp.dest('libs/dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('libs/dist'));
});

I just had a similar problem and this worked for me. The only difference is my plugin is called "transform-es2015-modules-amd".