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

Question

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

javascriptgulpbrowserify

28

我正在为我们团队设置一个半自动化的JavaScript脚本和依赖管理系统，借助于Gulp和Browserify。

我甚至不确定我想要实现的目标是否可以使用当前可用的工具集（和我有限的JavaScript知识）。我相信我想要实现的是一个相当普遍的情况，但我还没有找到我正在寻找的信息。

考虑以下图表：

enter image description here

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

我知道使用Browserify可以手动忽略或排除模块，这在项目年轻时是可以的，但随着项目的增长，管理需要在何处包括哪些依赖关系将变得非常麻烦。

我认为此处类似的问答具有我所要提出的问题的本质，但对我来说并不十分清晰。它还参考了gulp-browserify（已被列入黑名单）。

在我的图表中，我可以看到有三个Browserify entry points，但是由于我缺乏Gulp/Node/Browserify的经验，所以我很难理解如何尝试实现我想要的东西。

我很高兴去努力尝试组合它们，因为我已经在尝试了，但是项目经理正在逼着我去临时“解决方案”，直到我能够实现更自动化和强大的系统。

提前致谢。

编辑

从 Browserify 的插件文档看来，这似乎可以通过使用factor-bundle 实现。而这个工具是由substack开发的，他曾经在推特上指出。但由于我缺乏 Node/Browserify/Gulp 的经验，因此很难将所有组件整合到一起。 相关问题：

如何在程序中使用 factor-bundle 和 browserify？

- justrhysism

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- justrhysism · Accepted Answer

弄清楚了，分享一下经验：

代码示例：

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会抛出错误。我不确定是为什么，因为我本以为 factor-bundle 只需要将流写入到输出文件中，无论是否存在都应该可行。为了解决问题，清理完输出目录后，我只是创建了'占位符'文件来让它正常运行。
我还没有找到如何在使用它作为 browserify 插件时访问factor-bundle 流事件的方法（甚至可能无法实现），因此对输出文件进行任何进一步的操作（如代码压缩等）可能需要在管道中的其他地方完成，可能需要使用另一个 browserify 插件，或者在事后进行。