0

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');
4

1 回答 1

1

更新 7/2017 使用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'));
});

感谢@Michael Heuberger确定了这个解决方案。

原始答案 9/2014

我相信这里的正确答案是不浏览分布式库。我们简单地连接和缩小所有库 - 包括我们使用 browserify 构建的库 - 一切都开始很好地结合在一起。

于 2014-09-29T01:07:44.367 回答