Javascript 如何在Gulp中使用Browserify lib为模块别名？

Browserify自述文件描述了如下创建外部文件：

$browserify-r到-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>

---

这是一个变通方法，如果我想充分利用Gulp管道的话，这不是最佳选择。我想知道如何在没有命令行的情况下实现这一点，或者，如果没有，为什么这只能通过CLI实现？

以下是我可以想到的几种方法来实现您想要的目标：

1。使用.bundle（）方法：

看起来这个方法可能正是你所需要的。它是预先内置的。尝试使用此代码进行试验。它允许您使用gulp的

.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()
})

这相当于：

import {bundle} from "browserify"

最后两行假设一个JSON对象是从外部模块返回的，它是必需的/作为依赖项包含的。该外部文件中的返回对象应如下所示：

const bundle = require('browserify').bundle

module.exports = {
    "default": SomeMainClass,
    "bundle": someExtraFunctionLikeBundle
}

潜在的“Gotchya”：如果外部依赖项不返回JSON对象，那么

.bundle

将返回未定义的。例如，这将阻止

require（'browserify'）中的
.bundle
。bundle

工作：

module.exports = function() {...} // instead of module.exports = {JSON}

在试用了第一个代码示例之后，如果您需要更多关于Gulp的帮助，请告诉我。（它混合了

gulp.task（）

，

browserify（）

，

.bundle（）

，

.pipe（）

与您的代码一起工作的方式。您应该能够让它在您的计算机上工作。）

使用

expose

选项

函数包（）{
browserify（）
.require（“./myfile js”，{expose:“我的模块”}）
.要求（“通过”）
.require（“双工器”）
.bundle（）
/* ... */
}
吞咽任务（“browserify”，bundle）；

Browserify-Gulp集成 其他答案表明，

乙烯基源流

是这里的一个要求，但这不一定是真的。您还没有说明如何将Browserify和Gulp集成在一起。如果您实际上正在进行Browserify和Gulp之间的一些集成，而不仅仅是在Gulp任务中包装Browserify绑定操作（人们通常会这样做），例如在绑定的输出上运行Gulp插件，那么您只需要

乙烯基源流

。例如，您可以这样做：

var fs=require（“fs”）；
吞咽任务（“browserify”，函数（）{
返回browserify（/*…*/）
/* ... */
.bundle（）
//但是，如果你在这里大口大口地吃东西，你应该用
//'乙烯基源流'和管道到'gulp.dest（）`。
.pipe（fs.createWriteStream（“./bundle.js”，“utf8”）；
});

将gulp与browserify一起使用时，需要安装

乙烯基源流

模块。

-r

标志向外部公开捆绑包中的模块，然后可以使用

require

调用这些模块

您可以配置多个条目并将配置移动到另一个文件，如果您只有一个条目文件，您可以将其传递到browserify并从选项中删除条目。

debug:true

选项 与命令行中的

-d

相同

var b = browserify(./app/index.js');                         

现在，您可以在gulp配置中执行此操作：

  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

选项

似乎存在关于使用

非通用js

模块或未正确设置

模块.exports

的模块的问题

如果您想使用从另一个捆绑包（假设您有多个捆绑包）中公开为

requireable

的模块，您可以：

在这种情况下，只要您在

bundle2

中需要

my module

，您就可以从

bundle.js

中的

require

外部重新需要它

如果希望通过一个require调用允许捆绑包外部需要多个文件，可以将它们作为

数组

传入

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

---

您可以查看和以了解更多信息。

我喜欢您将函数从任务配置中分离出来的方式，每个gulp任务是否有多个文件中的配置？您的意思是在单独的文件中定义任务函数并将其导入gulpfile？我经常在同一个文件中像插图一样编写它，但我这样做的主要原因是因为问题是关于Browserify API的，实际上与gulp没有任何关系，所以我甚至根本不想提及gulp，但这样做是为了帮助OP了解发生了什么。

b
.external('thorugh')
.external('my-module')
.../*more config*/
.bundle()
.pipe(transform('bundle2.js'))
.pipe(gulp.dest('./app/build')

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