As a newcomer to Browserify and JavaScript build systems in general, I find myself in a state of utter confusion.
I have successfully set up Gulp for my builds, but recently I have been exploring Browserify to bundle my code, mainly to organize my code into separate files and utilize the require() function to include them where needed.
My current dilemma involves a directory containing various small modules that I need to require within another module, and I am trying to avoid hardcoding the names of each individual file. Is there a way to require all the files at once?
I attempted to use Bulkify and Folderify but encountered difficulties. For instance, Bulkify instructs to install a package named bulkify in the node_modules folder, and then require bulk-require from a sub node_modules folder of the bulkify package. However, when I attempted this, Browserify threw a
Cannot find module 'bulk-require'...At this juncture, I am quite perplexed as to why the installation instructions for these packages are not working (and whether they will even solve my problem). Should I be incorporating them into my Gulp file? Or can I include them in one of my modules to be called during Browserify?
Below is a snippet of the build task pertaining to this issue:
// 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 am quite lost at this point. Should I resort to hardcoding the paths in my require() statements, or is there a more efficient approach?
EDIT
Upon inspection, I can see that bulk-require is present in the bulkify node module:
However, when attempting to require bulk-require, it fails:
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 managed to resolve this issue by using the require-globify package (https://github.com/capaj/require-globify). In my JavaScript, I utilized:
var properties = require('./properties/*.js', {mode: 'hash', resolve: ['path-reduce', 'strip-ext']});
This returned an object with keys representing the filename without extension or the path prefix.
In my gulpfile.js, I made the following adjustments:
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'));