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

Question

对于我的团队，我在Gulp和Browserify的帮助下尝试建立半自动 JavaScript脚本和依赖关系管理系统。

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

考虑下图：

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

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

A similar Q&A here我认为与我试图提出的问题具有相同的本质，但对我而言，它并不十分清楚。它还引用了gulp-browserify which has since been blacklisted。

在我的图表中，我可以看到我有三个Browserify 入口点，但我缺乏Gulp / Node / Browserify经验意味着我很难绕过我的方式试着实现我想要的目标。

我很高兴能够尝试将它拼凑在一起，正如我已经尝试过的那样 - 但是项目经理正在我的脖子上呼吸，所以我不得不一起打破一个临时的＆＃34 ;溶液＆＃34;直到我能够实现更加自动化和健壮的东西。

提前致谢。

修改

Browserify's plugin documentation似乎可以通过使用factor-bundle substack pointed out to me来实现这一目标。然而，由于我缺乏Node / Browserify / Gulp经验，我很难将所有部分组合在一起。

相关问题

• How can I use factor-bundle with browserify programmatically?

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 documentation。

中有所描述

备注：

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

• 在将factor-bundle stream event用作browserify插件时（我甚至可能无法访问），我还没想出如何访问{{3}}，所以对输出文件的任何进一步工作（例如uglifying等） ）可能需要在管道中的其他地方完成，可能需要使用另一个browserify插件，或者甚至在事后。