Only common bundle created

[jurpy]

Not sure whether this is an issue or just something I'm doing wrong or misunderstanding.

I'm trying to use factor-bundle to split my javascript into bundles for common and page-specific javascript but I can't even get the example given in the readme to work.

When I create the files x.js, y.js etc and run factor-bundle as a browserify plugin:

browserify x.js y.js -p [ factor-bundle -o bundle/x.js -o bundle/y.js ] \
  -o bundle/common.js

I just get the following output in bundle/common.js as the only file. I was expecting only the common modules to be present here and additional x.js and y.js files?

require=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({3:[function(require,module,exports){
var z = require('./z.js');
console.log(z(2) + 111);

},{"./z.js":4}],2:[function(require,module,exports){
var z = require('./z.js');
var w = require('./w.js');
console.log(z(5) * w(2));

},{"./w.js":1,"./z.js":4}],4:[function(require,module,exports){
module.exports = function (n) { return n * 111 }

},{}],1:[function(require,module,exports){
module.exports = function (n) { return n * 50 }

},{}]},{},[2,3]);

Browserify version 5.9.3
Factor-bundle version 2.1.1

[terinjokes]

Can you confirm the version of factor-bundle in your project is 2.1.1?

You can also test within this repository:

$ cd test/deps
$ mkdir bundle
$ browserify x.js y.js -p [ ../../ -o bundle/x.js -o bundle/y.js ] -o bundle/common.js

This produces the three files with the expected outputs.

[jurpy]

I have now got this working from the command line. Browserify was installed globally at 5.9.1 and after updating to 5.10.1 I got the three files as expected.

I still can't get it to work as expected when using Gulp though. I found someone that looks like they're having the same issue:

http://stackoverflow.com/questions/25280457/browserify-and-factor-bundle-producing-only-one-file

My gulp task is very similar to this one and I'm having the same problem of just a common.js file being produced.

Any help would be very appreciated! Thanks

[terinjokes]

@jrp90 in your example, does page1 or page2 require the other page?

[jurpy]

No, both require 2 modules I want to be in the common js file and each one requires another page specific module I want to be in its own file.

The strange thing is it works as expected on my files if I use the command line but not when using my Gulp task.

Works:

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

Doesn't work:

var gulp         = require('gulp');
var browserify   = require('browserify');
var sourceStream = require('vinyl-source-stream');
var factor       = require('factor-bundle');

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

    return browserify({
        entries: ['./app/assets/js/main.js', './app/assets/js/search.js'],
    })
    .plugin(factor, {
        o: ['./public/js/main.js', './public/js/search.js']
    })
    .bundle()
    .pipe(sourceStream('common.js'))
    .pipe(gulp.dest('./public/js/'));

});

[defrex]

I seem to be having the same issue. It also works find from the command line, but not from gulp.

[jurpy]

I have a workaround for now if you need one - just use the gulp-shell plugin to run the 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'
]));

[Granze]

I have the same issue as well

[defrex]

@jrp90 Ya, I ended up using the same workaround. Not ideal, but what factor-bundle does is fantastic enough to make it worth while.

[corbanb]

Bummer this isn't worked out as a plugin as its not deployable via heroku now unless a custom build pack is created specific to the project.

Any ideas on when this might be fixed?

[dgellow]

Same problem here.
Thanks @jrp90 for the workaround.

[mikalai-s]

JFYI I had the same issue. The workaround I found is usage of full paths + duplicate entries property in factor-bundle plugin options:

browserify({
    entries: ['c:/project/auth-logon/index.js', 'c:/project/views/model-create/index.js']
})
.plugin(factor, {
    entries: ['c:/project/auth-logon/index.js', 'c:/project/views/model-create/index.js'],
    o: ['c:/project/build/auth-logon.js', 'c:/project/build/model-create.js']
})
.bundle()
.pipe(source('common.js'))
.pipe(gulp.dest(buildPath));

It appers that second entries is required to avoid TypeError: Arguments to path.resolve must be strings.

My factor-bundle is 2.2.1 and browserify 5.11.2.

[dgellow]

@mikalai-silivonik Nice ! Your workaround works for me and is a lot better than the gulp-shell solution.

[ghost]

Possibly the fix in factor-bundle core would be to path.resolve() the arguments.

[defrex]

I can also confirm that this solution worked for me.

@substack Ya, my solution was mapping path.resolve. Worked like a charm.

[cognivator]

Awesome! This fixed my problem, too... especially @defrex 's suggestion to path.resolve the entries and output,

(function() {
    'use strict';

    var browserify = require('browserify');
    var factor = require('factor-bundle');
    var fs = require('fs');
    var path = require('path');

    var e = [path.resolve('./app/scripts/kioskAPI-gateway.js'),
                 path.resolve('./app/scripts/backoffice.js')];
    var o = [path.resolve('./k.js'),
                 path.resolve('./b.js')];


    var b = browserify();
    b.add(e);
    b.plugin(factor, {
        e: e,
        o: o
    });
    b.bundle().pipe(fs.createWriteStream('./c.js'));

}());

Now, on to adding bromote for the runtime-only scripts...

[terinjokes]

I'll patch this up, and look into why we aren't getting entries from browserify properly.

[DenMesh]

Don't know if I am doing something wrong or else, but I have the same problem even with a command line. So:

I have explicitly installed browserify@5.10.1 and factor-bundle@2.1.1, both globally (-g flag).
Then I have created a directory with 5 files:
x.js

console.log("X!");

y.js

console.log("Y!");

xy.js

console.log("XY!");

a.js

require('./x.js');
require('./xy.js');

and
b.js

require('./y.js');
require('./xy.js');

Then I run in command line

browserify a.js b.js -p [ factor-bundle -o ba.js -o bb.js ] -o bcommon.js

And get only the "bcommon.js" file with x,y and xy all bundled into it.

[terinjokes]

@DenMesh I just tried your test case with browserify@6.2.0 and factor-bundle@2.3.2 and ba.js, bb.js and bcommon.js were created.

• ba.js:
  • a.js
  • x.js
• bb.js:
  • b.js
  • y.js
• bcommon.js
  • xy.js

A fix for this I believe was included with 2.2.4, added by @substack.