I'm new to Browserify (and Javascript build systems in general) and have reached a point where I am thoroughly confused.

I have Gulp setup to do my builds, which has always worked fine, and lately I've been using Browserify to bundle -- mostly so I can separate my code into separate files and require() them where they need to be.

My issue is, I have a folder with a bunch of small modules I need to require within another module, and I am trying to avoid hard coding the names of all of them. Is there a way to do a require of all of the files?

I've tried using Bulkify and Folderify but cannot get them to work. For example, with Bulkify, the package installed is called bulkify and is in the node_modules folder, but then they tell you to require bulk-require, which is in a sub node_modules folder of the bulkify package. When I try that, Browserify chokes with a Cannot find module 'bulk-require'... type error.

At this point I am confused because I have no idea why the installation directions of both of those do not work (nor whether they will even help me). Am I supposed to be using them in my Gulp file? Or can I use them in one of my modules and it will get called during the Browserify?

Here is a snippet of my build task for this if this helps:

// Report Builder
gulp.task('script-builder', function() {

    // Unminified
    // **********************************************************
    browserify({entries: './resources/assets/js/report/builder.js'})
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .bundle()
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(source('builder.js'))
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(buffer())
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(gulp.dest('./public/js/debug'));

    // Minified
    // **********************************************************
    browserify({entries: './resources/assets/js/report/builder.js'})
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .bundle()
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(source('builder.js'))
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(buffer())
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(ext_replace('.min.js'))
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(uglify())
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(gulp.dest('./public/js/dist'));

});

I have no idea what I am doing here. Am I just going to have to hardcode the paths in my require() calls or is there a better way?

EDIT

I can clearly see bulk-require in the bulkify node module:

But, when I try to require bulk-require, it chokes:

module.exports = function(type, driver, node) {

    var propertiesContainer = '#property-container';

    var bulk = require('bulk-require');
    var mods = bulk(__dirname, ['properties/**/*.js']);

}

Error: Cannot find module 'bulk-require' from '/path/to/my/project/resources/assets/js/report'

EDIT 2

I was able to make this work using the require-globify package (). In my javascript, I used:

var properties = require('./properties/*.js', {mode: 'hash', resolve: ['path-reduce', 'strip-ext']});

That returned an object with keys as the filename without extension or the path prefix.

In my gulpfile.js, I did this:

browserify({
    entries: './resources/assets/js/report/builder.js',
    transform: ['require-globify']
})
.on('error', function (err) { console.log(err); this.emit('end'); })
.bundle()
.on('error', function (err) { console.log(err); this.emit('end'); })
.pipe(source('builder.js'))
.on('error', function (err) { console.log(err); this.emit('end'); })
.pipe(buffer())
.on('error', function (err) { console.log(err); this.emit('end'); })
.pipe(gulp.dest('./public/js/debug'));

I'm new to Browserify (and Javascript build systems in general) and have reached a point where I am thoroughly confused.

I have Gulp setup to do my builds, which has always worked fine, and lately I've been using Browserify to bundle -- mostly so I can separate my code into separate files and require() them where they need to be.

My issue is, I have a folder with a bunch of small modules I need to require within another module, and I am trying to avoid hard coding the names of all of them. Is there a way to do a require of all of the files?

I've tried using Bulkify and Folderify but cannot get them to work. For example, with Bulkify, the package installed is called bulkify and is in the node_modules folder, but then they tell you to require bulk-require, which is in a sub node_modules folder of the bulkify package. When I try that, Browserify chokes with a Cannot find module 'bulk-require'... type error.

At this point I am confused because I have no idea why the installation directions of both of those do not work (nor whether they will even help me). Am I supposed to be using them in my Gulp file? Or can I use them in one of my modules and it will get called during the Browserify?

Here is a snippet of my build task for this if this helps:

// Report Builder
gulp.task('script-builder', function() {

    // Unminified
    // **********************************************************
    browserify({entries: './resources/assets/js/report/builder.js'})
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .bundle()
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(source('builder.js'))
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(buffer())
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(gulp.dest('./public/js/debug'));

    // Minified
    // **********************************************************
    browserify({entries: './resources/assets/js/report/builder.js'})
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .bundle()
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(source('builder.js'))
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(buffer())
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(ext_replace('.min.js'))
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(uglify())
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(gulp.dest('./public/js/dist'));

});

I have no idea what I am doing here. Am I just going to have to hardcode the paths in my require() calls or is there a better way?

EDIT

I can clearly see bulk-require in the bulkify node module:

But, when I try to require bulk-require, it chokes:

module.exports = function(type, driver, node) {

    var propertiesContainer = '#property-container';

    var bulk = require('bulk-require');
    var mods = bulk(__dirname, ['properties/**/*.js']);

}

Error: Cannot find module 'bulk-require' from '/path/to/my/project/resources/assets/js/report'

EDIT 2

I was able to make this work using the require-globify package (https://github.com/capaj/require-globify). In my javascript, I used:

var properties = require('./properties/*.js', {mode: 'hash', resolve: ['path-reduce', 'strip-ext']});

That returned an object with keys as the filename without extension or the path prefix.

In my gulpfile.js, I did this:

browserify({
    entries: './resources/assets/js/report/builder.js',
    transform: ['require-globify']
})
.on('error', function (err) { console.log(err); this.emit('end'); })
.bundle()
.on('error', function (err) { console.log(err); this.emit('end'); })
.pipe(source('builder.js'))
.on('error', function (err) { console.log(err); this.emit('end'); })
.pipe(buffer())
.on('error', function (err) { console.log(err); this.emit('end'); })
.pipe(gulp.dest('./public/js/debug'));

• javascript
• npm
• gulp
• browserify

2 Answers 2

That's a pretty easy task to achieve. Using fs you may dynamically require all the dependencies at once simply accessing your node_modules folder.

var normalizedPath = require("path").join(__dirname, "node_modules/bulkify");
require("fs").readdirSync(normalizedPath).forEach(function(file) {
  require("./node_modules/bulkify" + file);
});

More answers on this question can be found here

EDIT Apologies for the generic answer I kinda misunderstood the question about dynamically requiring files into Browserify.

Require-globify seems a neat approach for your problem.

Take a moment to have a look at this answer as well Compiling dynamically required modules with Browserify

I haven't used it, but I think bulkify will do what you want.

Am I supposed to be using them in my Gulp file? Or can I use them in one of my modules and it will get called during the Browserify?

Yes and yes.

I think the gist of it is something like this:

gulpfile.js

var bulkify = require('bulkify');

browserify(...)
  .transform(bulkify)
  // ...

another-module.js (bundled module)

var bulk = require('bulk-require');
var a_bunch_of_small_modules = bulk(__dirname, ['somdir/**/*.js']);
a_bunch_of_small_modules.somedir.whatever();