javascript - Browserify y Babel gulp tareas

babeljs

Question

Quiero usar tanto Browserify como Babel con mi JavaScript. Para esto he creado una tarea trilla

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

Desafortunadamente, cuando quiero usar import dentro de mi código, recibo un error:

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

Mi archivo js principal es muy simple:

import ''directives/toggleClass'';

Supongo que se debe a Babel (y es un use strict ), pero ¿qué puedo hacer?

Answer 1

Babel mantiene una transformación oficial para Browserify llamada github.com/babel/babelify y debe usarse siempre que sea posible si se usa babel y browserify.

Abandone el uso de babel directamente y coloque babelify como un complemento de transformación para browserify. Hay muchas formas de configurar browserify, pero probablemente sea más fácil especificar la configuración en su package.json .

"browserify": { 
  "transform": [["babelify", { "presets": ["es2015"] }]]
}

Entonces se simplificará su tarea trilla

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

Browserify también expone métodos para hacer esto mediante programación, de modo que podrá configurar el agrupador desde su tarea truculenta (eliminar la configuración del paquete, aunque usar el paquete es perfectamente correcto para esto), verifique su documentación y experimente, lo he hecho. antes, pero ha pasado mucho tiempo desde que usé trago (usar trago aquí es solo una complicación que no necesita, pero espero que lo esté usando en otro lugar en su canal de compilación donde podría ser más útil).