I'm having problems finding a canonical approach to building apps with cascading browserified dependencies. I've got a dependency chart that looks something like this:
angular --> lib 1 --> lib 2 --> application
Both libraries and the app are CommonJS Angular modules. I'd like to bundle each library separately so they can be used independently and/or in non-CJS apps. When I bundle the app, I want to include all upstream deps (angular, lib1, lib2, etc) in a single vendors.js and the application into a bundle.js.
I've tried using browserify and browserify-shim to create the bundles, but I continually hit a wall where the re-browserified libraries in vendors.js
cannot locate the modules loaded within.
This doesn't seem like an un-common use case, but I'm having a heck of a time finding any guidance; any advice would be golden. Here's a more concrete example:
Resources Library:
'use strict';
var angular = require('angular'); // Non CJS lib; use browserify-shim
require('angular-resource'); // Non CJS lib; use browserify-shim
module.exports = angular.module('resources-library', ['angular-resource']);
require('./services/anApiConsumerResource');
require('./services/anotherApiConsumerResource');
Widgets Library:
'use strict';
var angular = require('angular'); // Non CJS libs; use browserify-shim
require('resources-library') // browserified CJS Lib; ??? ??? ???
module.exports = angular.module('widgets-library', ['resources-library']);
require('./directives/someDirectiveThatUsesTheResourceLib');
require('./directives/anotherDirectiveThatUsesTheResourceLib');
Sample Application:
'use strict';
var angular = require('angular'); // Non CJS libs; use browserify-shim
require('resources-library') // browserified CJS Lib; ??? ??? ???
require('widgets-library') // browserified CJS Lib that depends on
// another browserified CJS Lib
module.exports = angular.module('the-best-app-in-the-universe', [
'resources-library',
'widgets-library']);
require('./directives/someDirectiveThatUsesTheWidgetsLib');
require('./services/aServiceThatConsumesTheResourceLib');
Updated 7/2017 Use Gulp-Derequire.
gulp.task('build', function() {
var bundleStream = browserify({entries: './index.js', standalone: 'yourModule'}).bundle();
return bundleStream
.pipe(source('yourModule.js'))
.pipe(derequire())
.pipe(gulp.dest('./build'));
});
Thanks to @Michael Heuberger for identifying this solution.
Original Answer 9/2014
I believe the correct answer here is to not browserify distributed libraries. We simply concatenate and minify all libraries - including the ones we built using browserify - and everything starts to come together nicely.