如何在Gulp中使用Browserify lib来模块化？
Browserify自述文件描述了如何创build外部需求： $ browserify -r through -r duplexer -r ./my-file.js:my-module > bundle.js
然后在你的页面上，你可以做：
<script src="bundle.js"></script> <script> var through = require('through'); var duplexer = require('duplexer'); var myModule = require('my-module'); /* ... */ </script>
这工作，如果你想要使用命令行，但我想在一个大文件中使用Browserify。 但是在这个例子中似乎没有办法给模块添加一个名字，比如./myfile-js:my-module 。 如果有select，我还没有find它。 以他们描述的方式来要求我的模块的唯一方法是require(3)因为Browserify似乎给模块赋予数字，但是这些数字会改变，显然这是不可取的。
编辑：我目前的解决scheme是这样做的：
var shell = require('gulp-shell'); gulp.task('browserify', shell.task([ 'browserify -r ./src/bundle.js:bundle > ./build/bundle.js' ]))
如果我想充分利用Gulppipe道，这是一个解决方法，而不是最佳的。 我想知道如何在没有命令行的情况下做到这一点，或者，如果没有，为什么这只能通过CLI完成？
b.require()与expose选项。
function bundle () { browserify() .require("./myfile-js", {expose: "my-module"}) .require("through") .require("duplexer") .bundle() /* ... */ } gulp.task("browserify", bundle);
Browserify-Gulp集成
其他的答案表明vinyl-source-stream是这里的一个要求，但这不一定是正确的。 你没有说明你如何整合Browserify和Gulp。 如果你实际上在Browserify和Gulp之间进行一些整合，而不是仅仅在一个Gulp任务（人们通常会这么做）中包装一个Browserify捆绑操作，就像在捆绑的输出上运行一个Gulp插件，那么你只需要vinyl-source-stream 。 例如，你可以这样做：
var fs = require("fs"); gulp.task("browserify", function () { return browserify(/* ... */) /* ... */ .bundle() // But if you're doing something with Gulp here you should use // `vinyl-source-stream` and pipe to `gulp.dest()`. .pipe(fs.createWriteStream("./bundle.js", "utf8")); });
以下是我可以想到的几种方法来完成您要查找的内容：
1.使用.bundle（）方法：
看起来像.bundle（）方法可能是你所需要的。 它预先build成了browserify 。 尝试试验这个代码。 它允许你使用.pipe()的.pipe()方法。
const browserify = require('browserify') const gulp = require('gulp') const source = require('vinyl-source-stream') gulp.task('browserify', function (cb) { browserify('./src/bundle.js') .bundle() // <- This traverses the /node_modules/ tree to bundle everything ... // into 1 giant stream & eventually a single file. .pipe(source('bundle.js')) // Creates the "output source" file name, // rather than being the "input source". .pipe(gulp.dest('./build/')) return cb() })
那么你应该可以把这个文件： <script src="./build/bundle.js"></script>链接到一个<script>标签，如下所示： <script src="./build/bundle.js"></script> 。
NPM链接： vinyl-source-stream ， browserify ， gulp （你已经知道这些，但其他人可能还没有意识到这一点。）
2.build立一个深层链接的别名：
如果你想创build一个别名，哪个深层链接到外部的JS类（不是CSS类），你必须尝试使用require（）方法调用，如下所示：
const bundle = require('browserify').bundle
这相当于：
import {bundle} from "browserify"
最后2行假设JSON对象正在从外部模块返回，这是作为一个依赖需要/包含。 该外部文件中的返回对象应如下所示：
module.exports = { "default": SomeMainClass, "bundle": someExtraFunctionLikeBundle }
潜在的 “Gotchya”：如果外部依赖不返回JSON对象，那么.bundle将返回undefined。 例如，这会阻止require('browserify').bundle的.bundle工作：
module.exports = function() {...} // instead of module.exports = {JSON}
请试用第一个代码示例之后，让我知道是否需要Gulp的额外帮助。 （这是将gulp.task() ， gulp.task()和.pipe()和你的代码混合在一起的一个混合体，你应该能够在你的计算机上工作。
当用browserify使用gulp时，需要安装vinyl-source-stream模块。 -r标志公开了外部包中的模块，然后可以使用require调用它们。
您可以configuration多个条目并将您的configuration移动到另一个文件，如果您只有一个条目文件，则可以将其传递到浏览器并从选项中删除entries 。 debug:true选项与命令行中的-d相同
var b = browserify(./app/index.js');
现在，你可以在你的gulpconfiguration中做到这一点：
var gulp = require('gulp'); var transform = require('vinyl-source-stream'); var browserify = require('browserify'); var b = browserify({ entries:['./app/index.js'], debug:true }); gulp.task('browserify',function(){ return b .require('through') .require('duplexer') .require('./app/lib/my-module',{expose:'my-module'}) .bundle() .pipe(transform('bundle.js')) .pipe(gulp.dest('./app/build')) });
如果您想要以不同的名称公开您的模块以使用require ，请使用expose选项。
看起来像使用non Commonjs模块或没有正确设置module.exports模块有一个问题 。
如果您想从另一个包中使用您公开的模块（假设您有多个包），那么您可以：
b .external('thorugh') .external('my-module') .../*more config*/ .bundle() .pipe(transform('bundle2.js')) .pipe(gulp.dest('./app/build')
在这种情况下，无论何时您需要bundle2 my-module ，您都会从bundle.js的require以外部方式重新使用它。
如果您希望允许在一个请求调用的情况下在包外部需要多个文件，则可以将它们作为array传递。
gulp.task('browserify',function(){ return b .require(['through','duplexer'],{expose:'stream-utils'}) .require('./app/lib/my-module',{expose:'my-module'}) .bundle() .pipe(transform('bundle.js')) .pipe(gulp.dest('./app/build')) });
您可以查看Stefan Imhoff的gulp教程和browserify API以获取更多信息。