node.js - last - Cómo incluir node_modules en un paquete de proveedor browserify separado
npm last version (3)
Estoy tratando de convertir una aplicación AngularJS para usar browserify. He instalado todos mis paquetes de bower en node_modules usando napa. Ahora quiero buscarlos en un paquete de proveedor separado y declararlos como dependencias "externas". Me gustaría darles alias para que pueda "requerir (''angular'')" en lugar de "requerir (''angular / angular'')", como parece que se puede hacer con los externos.
Los ejemplos que he visto (por ejemplo, http://benclinkinbeard.com/posts/external-bundles-for-faster-browserify-builds/ ) suponen que he descargado los archivos del proveedor en un directorio ''lib''. Quiero simplemente agrupar mis archivos de proveedor de node_modules. Parece que debería ser fácil pero no puedo ver cómo hacerlo.
Esta solution ve muy bien:
var packageJSON = require(''./package.json'');
var dependencies = Object.keys(packageJSON && packageJSON.dependencies || {});
gulp.task(''vendor'', function() {
return browserify()
.require(dependencies)
.bundle()
.pipe(source(''vendor.bundle.js''))
.pipe(gulp.dest(__dirname + ''/public/scripts''));
});
También me enfrento a este problema. Debido a que era un archivo enorme cuando todos los proveedores de la biblioteca en el mismo archivo. Así que el navegador siempre se atascó con la descarga de más de 10 MB de archivos. La minificación de archivos tampoco era una solución porque demoraba más tiempo en compilarse y eso no era útil para el desarrollo.
He mantenido vendor.js y app.js para módulos de nodo y scripts de aplicación separados. Es como esto.
Muestra vendor.js (src / app / vendor.js)
/**
* Node modules
*/
require(''angular'');
require(''angular-cookies'');
require(''angular-ui-router'');
require(''angular-aria'');
require(''angular-animate'');
....
Ejemplo de aplicación.js (src / app / app.js)
/**
* App Common Modules
*/
require(''./modules/about/about.routing.js'');
require(''./modules/home/home.routing.js'');
/**
* Services
*/
require(''./shared/services/order.js'');
require(''./shared/services/product.js'');
/**
* Directives
*/
require(''./shared/directives/dropzone.js'');
require(''./shared/directives/tab-change.js'');
angular
.module(''myApp'', [
//------------- Node modules ------------//
''ui.router'',
''ngMaterial'',
//------------- App Common modules ------------//
//About
''cloudDecor.routing.about'',
''cloudDecor.controller.about'',
//Home
''cloudDecor.routing.home'',
''cloudDecor.controller.home'',
//------------- Services --------------//
''cloudDecor.service.order'',
//------------- Directives ------------//
''cloudDecor.directive.dropzone'',
''cloudDecor.directive.tab-change''
]);
gulpfile.js
var gulp = require(''gulp''),
browserify = require(''browserify''),
uglify = require(''gulp-uglify''),
buffer = require(''vinyl-buffer'');
//App js
gulp.task(''app_js'', function() {
// Grabs the app.js file
browserify({
entries: [''./src/app/app.js''],
debug: true
})
.bundle()
.pipe(source(''main.js''))
.pipe(buffer())
.pipe(gulp.dest(''./build/''));
});
//Vendor js
gulp.task(''vendor_js'', function() {
// Grabs the app.js file
browserify({
entries: [''./src/app/vendor.js'']
})
.bundle()
.pipe(source(''vendor.min.js''))
.pipe(buffer())
.pipe(uglify({ mangle: false }))
.pipe(gulp.dest(''./build/''));
});
gulp.task(''default'', [''app_js'', ''vendor_js'']);
Asegúrese de incluir vendor.js antes de usar main.js en index.html
<html>
<body>
<!--Vendor js, See src/vendor.js-->
<script type="text/javascript" src="vendor.min.js"></script>
<!--App scripts, See src/app.js-->
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Solo estaba tratando de hacer lo mismo. Creo que necesita usar --require para el paquete del proveedor y --export para las aplicaciones para que las dependencias no se agrupen dos veces.
Esto me funcionó usando la api y gulp de browserify (lodash y pixijs son mis node_modules):
var gulp = require(''gulp'');
var browserify = require(''browserify'');
var handleErrors = require(''../util/handleErrors'');
var source = require(''vinyl-source-stream'');
gulp.task(''libs'', function () {
return browserify()
.require(''lodash'')
.require(''pixi.js'')
.bundle()
.on(''error'', handleErrors)
.pipe(source(''libs.js''))
.pipe(gulp.dest(''./build/''));
});
gulp.task(''scripts'', function () {
return browserify(''./src/main.js'')
.external(''lodash'')
.external(''pixi.js'')
.bundle()
.on(''error'', handleErrors)
.pipe(source(''main.js''))
.pipe(gulp.dest(''./build/''));
});
gulp.task(''watch'', function(){
gulp.watch(''src/**'', [''scripts'']);
});
gulp.task(''default'', [''libs'', ''scripts'', ''watch'']);
Por supuesto, esta solución es un dolor para mantener ... Así que parché browserify para aceptar arreglos en require y external y luego puedes hacer esto, lo cual creo que es mucho mejor:
var gulp = require(''gulp'');
var browserify = require(''browserify'');
var handleErrors = require(''../util/handleErrors'');
var source = require(''vinyl-source-stream'');
var packageJson = require(''../../package.json'');
var dependencies = Object.keys(packageJson && packageJson.dependencies || {});
gulp.task(''libs'', function () {
return browserify()
.require(dependencies)
.bundle()
.on(''error'', handleErrors)
.pipe(source(''libs.js''))
.pipe(gulp.dest(''./build/''));
});
gulp.task(''scripts'', function () {
return browserify(''./src/main.js'')
.external(dependencies)
.bundle()
.on(''error'', handleErrors)
.pipe(source(''main.js''))
.pipe(gulp.dest(''./build/''));
});
gulp.task(''watch'', function(){
gulp.watch(''package.json'', [''libs'']);
gulp.watch(''src/**'', [''scripts'']);
});
gulp.task(''default'', [''libs'', ''scripts'', ''watch'']);
Es lo mejor que se me ocurre ... Por favor, avíseme si encuentra una mejor manera.