使用 Browserify 和 Gulp 使用共享的公共库创建单独的 JavaScript 包 [英] Create separate JavaScript bundles with a shared common library using Browserify and Gulp

问题描述

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

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

考虑下图:

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

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

我认为这里有一个 类似的问答我要问的本质相同，但对我来说，还不是很清楚.它还引用了 gulp-browserify，它已被列入黑名单.

在我的图表中，我可以看到我有三个 Browserify 入口点，但我缺乏 Gulp/Node/Browserify 经验意味着我正在努力思考如何尝试实现我想要的.

我很高兴能够尝试将其拼凑起来，正如我已经尝试过的那样 - 但是项目经理正在喘不过气来，所以我不得不拼凑一个临时的解决方案"，直到我可以实施一些更自动化和更强大的东西.

提前致谢.

编辑

从 Browserify 的插件文档看来，这可能可以通过使用 factor-bundle 其中 子栈 指出给我;然而，由于我缺乏 Node/Browserify/Gulp 经验，我再次努力将所有部分整合在一起.

相关问题

• 如何以编程方式将 factor-bundle 与 browserify 一起使用?

解决方案

想通了，分享经验:

代码示例:

var gulp = require('gulp'),source = require('vinyl-source-stream'),browserify = require('browserify'),因子 = 要求(因子捆绑")；gulp.task('浏览器', function(){返回浏览器化({条目:['blog.js', 'page.js']}).plugin(因素，{//文件输出顺序必须与入口顺序一致o: ['bundle/blog.js', 'bundle/page.js']}).捆({调试:真}).pipe(source('common.js')).pipe(gulp.dest('bundle/'));});

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

注意事项:

• 我发现如果输出文件不存在，Node 会抛出错误.我不确定为什么我会假设 factor-bundle 只是将流写入输出文件，而不管它是否存在.作为一种解决方法，在清理"输出目录之后，我只是创建了占位符"文件以保持其正常运行.

• 我还没弄清楚如何访问 factor-bundle 流事件 当将其用作 browserify 插件时(甚至可能无法实现)，因此对输出文件的任何进一步工作(例如 uglifying 等)都可能需要在管道中的其他地方完成，可能需要使用另一个 browserify 插件，甚至事后.

For my team at work, I'm trying to set up a semi-automated JavaScript script and dependency management system with the help of Gulp and Browserify.

I'm not even sure if what I'm trying to achieve is possible with the currently available set of tools (and my limited JavaScript knowledge). I believe what I'm trying to achieve is a pretty common scenario, but I haven't been able to find the information I've been looking for.

Consider the following diagram:

The lines indicate depedencies. For shared modules, such as Module-v and Module-y, I don't want the scripts to be duplicated by being included in each of their respective bundles.

I know that using Browserify I can manually ignore or exclude modules, which is fine when the project is young - but as the project grows managing which dependencies need to be included where is going to become very cumbersome.

A similar Q&A here I think has the same essence of what I'm trying to ask, but to me, it isn't quite clear. It also references gulp-browserify which has since been blacklisted.

In my diagram, I can see that I have three Browserify entry points, but my lack of Gulp/Node/Browserify experience means I'm struggling to wrap my head around how I can try to achieve what I want to.

I'm happy to do the work to try and piece it together, as I already have been trying - however project managers are breathing down my neck so I'm having to hack together a temporary "solution" until I can implement something a little more automated and robust.

Thanks in advance.

Edit

It seems from Browserify's plugin documentation that this might be able to be achieved by using factor-bundle which substack pointed out to me; however again due to my lack of Node/Browserify/Gulp experience I am struggling to pull all the pieces together.

Related Questions

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

解决方案

Figured it out, sharing the learns:

Code example:

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/'));

});

The key difference between this output and the diagram, is that the common.js file is automatically generated based on common depenedencies between blog.js and page.js. This is described in the factor-bundle documentation.

Notes:

• I found that Node would throw an error if the output files didn't already exist. I'm unsure why as I would have assumed that factor-bundle would simply write a stream to the outputting file regardless of whether it was there or not. As a workaround, after 'cleaning' the output directory, I simply created 'placeholder' files to keep it happy.

• I haven't figured out how to access the factor-bundle stream event when using it as a browserify plugin (it may not even be possible), so any further work on the output files (such as uglifying etc) would likely need to be done somewhere else in the pipeline, possibly with another browserify plugin, or even after the fact.

这篇关于使用 Browserify 和 Gulp 使用共享的公共库创建单独的 JavaScript 包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！