How to include node_modules in a separate browserify vendor bundle

Question

I am trying to convert an AngularJS app to use browserify. I have installed all my bower packages in node_modules using napa. Now I want to browserify them into a separate vendor bundle and declare them as 'external' dependencies. I would like to give them aliases, so that I can "require('angular')" instead of "require('angular/angular')", as it seems you can do with externals.

The examples I have seen (e.g. http://benclinkinbeard.com/posts/external-bundles-for-faster-browserify-builds/) all assume that I have downloaed the vendor files into a 'lib' directory. I want to just bundle my vendor files from node_modules. It seems like it should be easy but I can't see how to do it.

Answer 1

I was just trying to do the same thing. I think you need to use --require for the vendor bundle and --export for the application's so that the dependencies don't get bundled twice.

This worked for me using browserify's api and gulp (lodash and pixijs being my 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']); 

Of course, this solution is a pain to maintain... So I patched browserify to accept arrays in require and external and then you can do this which I think it's a lot better:

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']); 

That's the best I could come up with... Please, let me know if you find a better way.