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

问题描述

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

我甚至不确定我想通过目前可用的工具集（以及我有限的JavaScript知识）实现的目标。我相信我试图达到的是一个很常见的情况，但我一直无法找到我一直在寻找的信息。

请考虑下图：

这些线条表示依赖关系。对于共享模块，例如 Module-v 和 Module-y ，我不希望脚本被包含在每个相应的包中。 p>

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

A 我认为与我想要问的内容具有相同的本质，但对我而言，这并不十分清楚。它还引用。

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

我很乐意将这些工作拼凑在一起，因为我已经尝试过了 - 但是项目经理正在喘口气，所以我不得不一起临时解决方案，直到我可以实现一些更加自动化和强大的功能。

预先感谢。

编辑

从，这可以通过使用 ;然而，再次因为我缺乏Node / Browserify / Gulp的经验，我一直在努力将所有的东西放在一起。

相关的问题

解决方案

代码示例：

<$> p $ p> var gulp = require（'gulp'），
source = require（'vinyl-source-stream'），
browserify = require（'browserify'），
factor = require（'factor-bundle'）;
$ b gulp.task（'browserify'，function（）{

return browserify（{
entries：['blog.js'，'page.js' ]
.plugin（factor，{
//文件输出顺序必须与入口顺序匹配
o：['bundle / blog.js'，'bundle / page.js ']
}）
.bundle（{
debug：true
}）
.pipe（source（'common.js'））
。 pipe（gulp.dest（'bundle /'））;

}）;


这个输出和图之间的关键区别在于常见。 js 文件是基于 blog.js 和 page.js 之间的常见依赖关系自动生成的。 。这在中进行了描述。

注意：

• 我发现如果输出文件没有已经存在。我不确定为什么，因为我会假设factor-bundle只是将一个流写入输出文件，而不管它是否存在。作为一种解决方法，在清理输出目录之后，我只是简单地创建了'placeholder'文件来保持它的快乐。

我还没有弄清楚如何在将它用作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包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！