javascript - node - browserify vs webpack

cómo generar múltiples paquetes con browserify y tragar

Question

Tengo browserify agrupar archivos y funciona muy bien. Pero, ¿y si necesito generar múltiples paquetes?

Me gustaría terminar con dist/appBundle.js y dist/publicBundle.js

gulp.task("js", function(){

    return browserify([
            "./js/app.js",
            "./js/public.js"
        ])
        .bundle()
        .pipe(source("bundle.js"))
        .pipe(gulp.dest("./dist"));

});

Obviamente, esto no va a funcionar, ya que solo estoy especificando un resultado (bundle.js). Puedo lograr esto repitiendo la declaración anterior como tal (pero no me parece correcto, debido a la repetición):

gulp.task("js", function(){

    browserify([
            "./js/app.js"
        ])
        .bundle()
        .pipe(source("appBundle.js"))
        .pipe(gulp.dest("./dist"));


    browserify([
            "./js/public.js"
        ])
        .bundle()
        .pipe(source("publicBundle.js"))
        .pipe(gulp.dest("./dist"));

});

¿Hay una mejor manera de abordar esto? ¡Gracias!

Answer 1

Múltiples paquetes con dependencias compartidas

Recientemente agregué soporte para múltiples paquetes con dependencias compartidas a https://github.com/greypants/gulp-starter

Aquí está la matriz de objetos de configuración de browserify que paso a mi tarea de browseify . Al final de esa tarea, repito sobre cada configuración, navegando por todas las cosas.

config.bundleConfigs.forEach(browserifyThis);

browserifyThis toma un objeto bundleConfig y ejecuta browserify (con watchify si el modo dev).

Este es el bit que ordena las dependencias compartidas :

// Sort out shared dependencies.
// b.require exposes modules externally
if(bundleConfig.require) b.require(bundleConfig.require)
// b.external excludes modules from the bundle, and expects
// they''ll be available externally
if(bundleConfig.external) b.external(bundleConfig.external)

Esta tarea de buscar en el navegador también informa correctamente cuando se completan todos los paquetes (el ejemplo anterior no está devolviendo secuencias o activando la devolución de llamada de la tarea), y usa watchify cuando está en devMode para recompilaciones súper rápidas.

El último comentario de Brian FitzGerald es perfecto. ¡Recuerda que es solo JavaScript!

Answer 2

No tengo un buen entorno para probar esto en este momento, pero mi suposición es que se vería algo así como:

gulp.task("js", function(){
    var destDir = "./dist";

    return browserify([
        "./js/app.js",
        "./js/public.js"
    ])
        .bundle()
        .pipe(source("appBundle.js"))
        .pipe(gulp.dest(destDir))
        .pipe(rename("publicBundle.js"))
        .pipe(gulp.dest(destDir));

});

EDITAR: Me acabo de dar cuenta de que leí mal la pregunta, debería haber dos paquetes separados procedentes de dos archivos .js separados. A la luz de eso, la mejor alternativa que se me ocurre es la siguiente:

gulp.task("js", function(){
    var destDir = "./dist";

    var bundleThis = function(srcArray) {
        _.each(srcArray, function(source) {
            var bundle = browserify(["./js/" + source + ".js"]).bundle();
            bundle.pipe(source(source + "Bundle.js"))
                  .pipe(gulp.dest(destDir));
        });
    };

    bundleThis(["app", "public"]);
});

Answer 3

gulp.task("js", function (done) {
  [
    "app",
    "public",
  ].forEach(function (entry, i, entries) {
    // Count remaining bundling operations to track
    // when to call done(). Could alternatively use
    // merge-stream and return its output.
    entries.remaining = entries.remaining || entries.length;

    browserify(''./js/'' + entry + ''.js'')
      .bundle()
      // If you need to use gulp plugins after bundling then you can
      // pipe to vinyl-source-stream then gulp.dest() here instead
      .pipe(
        require(''fs'').createWriteStream(''./dist/'' + entry + ''Bundle.js'')
        .on(''finish'', function () {
          if (! --entries.remaining) done();
        })
      );
  });
});

Esto es similar a la respuesta de @urban_racoons, pero con algunas mejoras:

• Esa respuesta fallará tan pronto como desee que la tarea sea una dependencia de otra tarea en gulp 3, o parte de una serie en gulp 4. Esta respuesta utiliza una devolución de llamada para señalar la finalización de la tarea.
• El JS puede ser más simple y no requiere subrayado.

Esta respuesta se basa en la premisa de tener una lista conocida de archivos de entrada para cada paquete, en oposición a, por ejemplo, la necesidad de agrupar una lista de archivos de entrada.