使用Browserify和Gulp使用共享公共库创建单独的JavaScript包

Question

对于我的团队在工作中，我试图建立一个半自动的JavaScript脚本和依赖管理系统，杯和Browserify的帮助。

我甚至不确定使用当前可用的工具集（以及我有限的JavaScript知识）是否可以实现我想要实现的目标。 我相信我想要实现的是一个非常常见的场景，但我无法找到我一直在寻找的信息。

请考虑以下图表：

这些线表示依赖性。 对于共享模块，例如Module-v和Module-y ，我不希望脚本通过包含在它们各自的捆绑包中而被复制。

我知道使用Browserify我可以手动忽略或排除模块，这在项目年轻时很好 - 但随着项目的增长管理需要包含哪些依赖项将变得非常繁琐。

我认为这里的类似问答与我想要提出的问题具有相同的本质，但对我而言，它并不十分清楚。 它还引用了gulp-browserify，后来被列入黑名单 。

在我的图表中，我可以看到我有三个Browserify 入口点 ，但是我缺乏Gulp / Node / Browserify经验意味着我正在努力探索如何实现我想要的目标。

我很乐意尝试将它拼凑起来，正如我已经尝试过的那样 - 但项目经理正在我的脖子上呼吸，所以我不得不将一个临时的“解决方案”合并在一起，直到我能够实现一些东西更加自动化和强大。

提前致谢。

编辑

它从似乎Browserify的插件文档 ，这可能是能够通过实现因素束其亚组 向我指出的 ; 然而，由于我缺乏Node / Browserify / Gulp经验，我正努力将所有部分组合在一起。

相关问题

• 如何以编程方式使用factorify与browserify？

Answer 1

想出来，分享学习：

代码示例：

var gulp = require('gulp'),
    source = require('vinyl-source-stream'),
    browserify = require('browserify'),
    factor = require('factor-bundle');

gulp.task('browserify', function(){

    return browserify({
        entries: ['blog.js', 'page.js']
    })
    .plugin(factor, {
        // File output order must match entry order
        o: ['bundle/blog.js', 'bundle/page.js']
    })
    .bundle({
        debug: true
    })
    .pipe(source('common.js'))
    .pipe(gulp.dest('bundle/'));

});

此输出和图表之间的主要区别在于， common.js文件是根据blog.js和page.js之间的常见依赖关系自动生成的。 这在factor-bundle文档中有所描述。

笔记：

• 我发现如果输出文件尚不存在，Node会抛出错误。 我不确定为什么我会假设因子束只是简单地将一个流写入输出文件，无论它是否存在。 作为一种解决方法，在“清理”输出目录之后，我只是创建了“占位符”文件以保持它的快乐。

• 我没有想到如何在将它作为browserify插件使用时访问因子束流事件 （甚至可能不可能），因此对输出文件（例如uglifying等）的任何进一步工作都可能需要在管道中的其他地方完成，可能使用另一个browserify插件，甚至在事实之后。