Attività di Browserify e Babel Gulp

Question

Desidero utilizzare sia Browserify che Babel con il mio JavaScript. Per questo ho creato un compito sorso

gulp.task('babel', function() { 
    return gulp.src('_babel/*.js') 
     .pipe(browserify({ insertGlobals : true })) 
     .pipe(babel({ presets: ['es2015'] })) 
     .pipe(gulp.dest('_dev/js')); 
}); 

Purtroppo, quando voglio usare import nel mio codice, sto ottenendo un errore:

ParseError: 'import' and 'export' may only appear at the top level 

mio principale del file js è molto semplice:

import 'directives/toggleClass'; 

Suppongo che sia a causa di Babel (ed è l'aggiunta use strict), ma cosa posso fare?

Answer 1

Babel mantiene una trasformazione ufficiale per Browserify chiamato babelify e dovrebbe essere utilizzato ovunque possibile se si utilizza babel e browserify.

Eliminare l'uso di babele direttamente e posizionare babelify come plugin di trasformazione per browserify. Esistono molti modi per configurare browserify, ma specificare la configurazione nel tuo package.json sarebbe probabilmente la più semplice.

vostro compito sorso verrà quindi semplificata

gulp.task('babel', function() { 
    return gulp.src('_babel/*.js') 
     .pipe(browserify({ insertGlobals : true })) 
     .pipe(gulp.dest('_dev/js')); 
}); 

Browserify espone anche i metodi per fare questo a livello di codice in modo da essere in grado di configurare Bundler da dentro il vostro compito gulp (far cadere il pacchetto di configurazione, anche se usare il pacchetto è perfetto per questo), controllare la documentazione e sperimentare, l'ho già fatto ma è passato molto tempo da quando usavo il gulp (usare il gulp qui è solo una complicazione di cui non hai bisogno, ma mi aspetto che tu stia usando altrove nella tua pipeline di costruzione dove potrebbe essere più utile).