捆绑浏览器化的库答案

【问题标题】：Bundling browserified libraries捆绑浏览器化的库
【发布时间】：2014-09-16 18:33:49
【问题描述】：

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

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

库和应用程序都是 CommonJS Angular 模块。我想单独捆绑每个库，以便它们可以独立使用和/或在非 CJS 应用程序中使用。当我捆绑应用程序时，我想将所有上游 deps（角度、lib1、lib2 等）包含在单个 vendor.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');

【问题讨论】：

这是我早些时候停止使用 Angular 的部分原因。 Angular 试图做得太多，特别是在尝试实现自己的模块系统而不是仅仅使用像 CommonJS 这样的东西时。如果你没有被 Angular 束缚，我强烈推荐 React.js 作为一个很好的选择。
文件路径有问题吗？此外，对于其他评论，这似乎不是一个具体的角度问题，更多的浏览器化并且不建议用库（例如反应，jquery，淘汰赛......）替换框架（即角度）
我不这么认为。单独地，我可以浏览每个库，将它们放入测试页面的脚本标签中，然后它们就可以工作了。当我尝试在下游捆绑浏览器化脚本时出现问题（例如，当我将 angular+resources-library 捆绑在小部件或应用程序中时）

标签： angularjs gruntjs browserify browserify-shim

【解决方案1】：

2017 年 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 构建的库 - 一切都开始很好地结合在一起。

【讨论】：