捆绑browserified库 [英] Bundling browserified libraries

问题描述

我遇到问题，找到一种规范的方法来构建具有级联浏览器化依赖项的应用程序。我有一个依赖图，看起来像这样：

  angular  - > lib 1  - > lib 2  - >应用程序
  

库和应用程序都是CommonJS Angular模块。我想单独捆绑每个库，以便它们可以独立使用和/或在非CJS应用程序中使用。当我捆绑应用程序时，我希望将所有上游代码（angular，lib1，lib2等）包含在一个vendor.js中，并将该应用程序包含到bundle.js中。
我尝试过使用browserify和browserify-shim创建捆绑包，但我不断地在 vendors.js 中重新浏览过的库无法找到的墙上找到在这里加载模块。

这看起来并不是一个非常见的用例，但我有时间寻找任何指导;任何建议都将是黄金。以下是一个更具体的例子：

资源库：

 'use严格'; 
 
 var angular = require（'angular'）; //非CJS库;使用browserify-shim 
 require（'angular-resource'）; //非CJS库;使用browserify-shim 
 
 module.exports = angular.module（'resources-library'，['angular-resource']）; 
 
 require（'./ services / anApiConsumerResource'）; 
 require（'./ services / anotherApiConsumerResource'）; 
  

小工具库：

 'use strict'; 
 
 var angular = require（'angular'）; //非CJS库;使用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'）; //非CJS库;使用browserify-shim 
 require（'resources-library'）// browserified CJS Lib; ??? ??? ??? 
 require（'widgets-library'）// browserified CJS Lib依赖于
 //另一个浏览过的CJS Lib 
 
 module.exports = angular.module（'the-best -app-in-the-universe'，[
'resources-library'，
'widgets-library']）; 
 
 require（'./ directives / someDirectiveThatUsesTheWidgetsLib'）; 
 require（'./ services / aServiceThatConsumesTheResourceLib'）; 
  

解决方案

2017年7月更新
使用 Gulp-Derequire 。

  gulp.task（'build'，function（）{
 var bundleStream = browserify（{entries：'./index.js'，standalone：'yourModule' （）（）; 
返回bundleStream 
 （'./build'））; 
}）; 
  

感谢@Michael Heuberger 标识此解决方案。

原始解答9/2014

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

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.

这篇关于捆绑browserified库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！