2

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?

user6315082
  • 31
  • 4

1 Answers1

0

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".

nfplee
  • 7,643
  • 12
  • 63
  • 124
  • `Error in plugin "gulp-babel" Message: .plugins must be an array, or undefined` – Ryan Aug 18 '20 at 19:54
  • @Ryan this answer is now out of date but addresses the issue in the original question. It looks like you need to change `'babel-plugin-transform-es2015-modules-amd'` to `['babel-plugin-transform-es2015-modules-amd']`. – nfplee Aug 20 '20 at 09:40
  • This worked for me: `function createBrowserifyBundle() { const bundleStream = browserify(jsEntry) .transform(babelify, { presets: ['es2015'] }) .transform(ngAnnotate) .bundle(); return ( bundleStream .pipe(source(jsDevCustomPiece)) .pipe(dest(staticPathJs)) ) }` – Ryan Aug 20 '20 at 15:41