Browserify and factor-bundle producing only one file

Question

Browserify and factor-bundle producing only one file

I have an app with several page-specific js files and am trying to use factor bundle to create a common js file with their shared dependencies. So far, I can only get browserify and factor-bundle to produce a single file (common.js) that contains all of my js (like a normal browserify bundle). Here is my gulp task:

gulp.task('browserify', function() {

    return browserify({
        entries: ['./app/client/page1.coffee', './app/client/page2.coffee'],
        extensions: ['.coffee', '.jade'],
        debug: true
    }).plugin('factor-bundle', {
        o: ['./public/js/page1.js', './public/js/page2.js']
    })
    .bundle()
    .pipe(source('common.js'))
    .pipe(gulp.dest('./public/js/'));

});

This only produces the common.js file in public/js and page1 and page2 are not separate files (they're embedded in common.js).

Expected Results
public/js/page1.js (containing page1.coffee code and any dependencies used only by page1.coffee)
public/js/page2.js (containing page2.coffee code and any dependencies used only by page2.coffee)
public/js/common.js (containing depedencies shared by page1.coffee and page2.coffee)

Removing .plugin(...)
If I remove the .plugin(...) the modules inside the common.js are in a different order, but byte-for-byte its the exact same size as when .plugin(...) is present.

Module Info

Browserify (5.9.3)
Factor Bundle (2.1.0)
Vinyl Source Stream (0.1.1)
Gulp (3.8.7)

node.js
gulp
browserify

Answer 1

I've been having a similar problem and raised the issue on the factor-bundle github account:

https://github.com/substack/factor-bundle/issues/29

There hasn't been a solution as such yet but I've found a workaround.

Have you found that the modules are split into separate pages as expected if you run browserify with the factor-bundle plugin from the command line?

This has been my experience in which case I'm using gulp-shell as a workaround to getting it to run as a gulp task:

var gulp  = require('gulp')
var shell = require('gulp-shell')

gulp.task('browserify-shell', shell.task([
  'browserify ./app/assets/js/main.js ./app/assets/js/search.js -p [ factor-bundle -o ./public/js/main.js -o ./public/js/search.js ] -o ./public/js/common.js'
]));

Answer 2

I ended up switching to webpack. When I needed dynamic module loading, I made the jump. Didn't have to change my code at all except for a small part related to dynamically loaded modules.