node - Cree paquetes de JavaScript separados con una biblioteca común compartida utilizando Browserify y Gulp
bundle js (1)
Lo descubrí, compartiendo los aprendizajes:
Ejemplo de código:
var gulp = require(''gulp''),
source = require(''vinyl-source-stream''),
browserify = require(''browserify''),
factor = require(''factor-bundle'');
gulp.task(''browserify'', function(){
return browserify({
entries: [''blog.js'', ''page.js'']
})
.plugin(factor, {
// File output order must match entry order
o: [''bundle/blog.js'', ''bundle/page.js'']
})
.bundle({
debug: true
})
.pipe(source(''common.js''))
.pipe(gulp.dest(''bundle/''));
});
La diferencia clave entre esta salida y el diagrama es que el archivo common.js se genera automáticamente en función de las dependencias comunes entre blog.js y page.js Esto se describe en la documentación del paquete de factores .
Notas:
Encontré que Node arrojaría un error si los archivos de salida ya no existían. No estoy seguro de por qué, como habría supuesto, el paquete de factores simplemente escribiría una secuencia en el archivo de salida, independientemente de si estaba allí o no. Como solución, después de "limpiar" el directorio de salida, simplemente creé los archivos de "marcador de posición" para mantenerlo contento.
No he descubierto cómo acceder al evento de flujo de factor-factor cuando lo uso como un complemento de browserify (puede que ni siquiera sea posible), por lo que es probable que se necesite más trabajo en los archivos de salida (como uglifying, etc.) hecho en otro lugar de la tubería, posiblemente con otro complemento de browserify, o incluso después del hecho.
Para mi equipo en el trabajo, estoy intentando configurar un script semiautomático de JavaScript y un sistema de administración de dependencias con la ayuda de Gulp y Browserify.
Ni siquiera estoy seguro de que lo que estoy tratando de lograr sea posible con el conjunto de herramientas disponibles actualmente (y mi limitado conocimiento de JavaScript). Creo que lo que estoy tratando de lograr es un escenario bastante común, pero no he podido encontrar la información que estaba buscando.
Considere el siguiente diagrama:
Las líneas indican depedencias. Para los módulos compartidos, como Module-v y Module-y , no quiero que los scripts se dupliquen incluidos en cada uno de sus paquetes respectivos.
Sé que al usar Browserify puedo ignorar o excluir módulos de forma manual, lo cual está bien cuando el proyecto es joven, pero a medida que el proyecto crece, gestiona las dependencias que deben incluirse y se volverá muy engorroso.
Una P&R similar aquí creo que tiene la misma esencia de lo que estoy tratando de preguntar, pero para mí, no está del todo claro. También hace referencia a gulp-browserify, que desde entonces ha sido incluido en la lista negra .
En mi diagrama, puedo ver que tengo tres puntos de entrada de Browserify, pero mi falta de experiencia en Gulp / Node / Browserify significa que estoy luchando para comprender cómo puedo tratar de lograr lo que quiero.
Estoy feliz de hacer el trabajo para tratar de reconstruirlo, como ya lo he estado haciendo. Sin embargo, los gerentes de proyecto me están fallando el cuello, así que tengo que hackear una "solución" temporal hasta que pueda implementar algo un poco Más automatizado y robusto.
Gracias por adelantado.
Editar
De la documentación del complemento de Browserify parece que esto podría lograrse mediante el uso factor-bundle substack que substack indicó ; Sin embargo, nuevamente debido a mi falta de experiencia en Node / Browserify / Gulp, estoy luchando para juntar todas las piezas.
preguntas relacionadas