捆绑浏览器库

时间:2014-09-16 18:33:49

标签: angularjs gruntjs browserify browserify-shim

我在寻找一种规范方法来构建具有级联浏览器依赖关系的应用程序时遇到了问题。我有一个看起来像这样的依赖图:

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

库和应用程序都是CommonJS Angular模块。我想分别捆绑每个库,以便它们可以独立使用和/或在非CJS应用程序中使用。当我捆绑应用程序时,我希望将所有上游代码(angular,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');

1 个答案:

答案 0 :(得分:1)

7月7日更新 使用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致identifying this solution

原始答案9/2014

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