javascript - 使用Browserify和Gulp使用共享的公共(public)库创建单独的JavaScript包

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

我什至不确定目前正在使用的工具集(以及我有限的JavaScript知识)是否可以实现我想要的目标。我相信我要达到的目标是一个很常见的情况，但是我一直无法找到我一直在寻找的信息。

考虑下图:

线表示消耗量。对于共享模块，例如Module-v和Module-y，我不希望脚本被包含在它们各自的 bundle 包中而被复制。

我知道使用Browserify可以手动忽略或排除模块，这在项目刚成立时很好-但是随着项目的发展，需要管理哪些依赖项将变得非常麻烦。

我认为similar Q&A here具有与我要询问的内容相同的本质，但是对我来说，这还不是很清楚。它还引用了gulp-browserify which has since been blacklisted。

在我的图中，我可以看到我有三个Browserify入口点，但是由于缺乏Gulp/Node/Browserify经验，这意味着我正在努力地思考如何实现自己想要的目标。

我很高兴能像以前已经尝试过的那样将它们拼凑在一起-但是项目经理垂涎三尺，所以我不得不共同制定一个临时的“解决方案”，直到我可以实现一些东西为止更自动化，更强大。

提前致谢。

编辑

从Browserify's plugin documentation看来，这可以通过使用factor-bundle来实现。但是再次由于缺乏Node/Browserify/Gulp的经验，我很难将所有部分组合在一起。

相关问题

substack

最佳答案

找出答案，分享经验:

代码示例:

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会抛出错误。我不确定为什么要假设factory-bundle会简单地将流写入输出文件，而不管它是否在那里。解决方法是，在“清理”输出目录之后，我只是创建了“占位符”文件以使其保持满意状态。

我还没有想出将factor-bundle stream event用作浏览器插件时如何访问ojit_a(甚至可能无法实现)，因此可能需要在其他地方对输出文件进行任何进一步的工作(例如，丑化等)。在管道中，可能使用另一个browserify插件，甚至在事后。

关于javascript - 使用Browserify和Gulp使用共享的公共(public)库创建单独的JavaScript包，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23748841/