捆绑浏览器序列化的库

Question

我很难找到一种规范的方法来构建带有级联浏览依赖关系的应用程序。我有一个依赖关系图，如下所示：

angular  --> lib 1 --> lib 2 --> application

库和应用程序都是CommonJS角模块。我想将每个库分别捆绑，这样它们就可以独立使用和/或在非CJS应用程序中使用。当我捆绑应用程序时，我想将所有上游的deps ( lib1，lib2等)包含在一个vendors.js中，并将应用程序包含到一个bundle.js中。我尝试过使用browserify和browserify-shim来创建包，但是我一直碰到一个墙，vendors.js中的重浏览器化库无法找到加载在其中的模块。

这看起来不像一个不常见的用例，但我正在寻找任何指导，任何建议都是金的。下面是一个更具体的例子：

资源图书馆：

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

小部件库：

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

申请样本：

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

Answer 1

更新7/2017使用德奎尔。

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为确定此解决方案服务。

原始答案9/2014

我相信正确的答案是不要浏览分布式库。我们只需连接和缩小所有库--包括我们使用浏览器化构建的库--一切就开始很好地结合在一起。