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

Question

Browserify 自述文件描述了创建外部需求，如下所示： $ 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>

如果你想使用命令行，这很有效，但我想在 gulpfile 中使用 Browserify。但是在示例中似乎没有办法为./myfile-js:my-module 之类的模块添加名称。如果有它的选项，我还没有找到它。以他们描述的方式要求我的模块的唯一方法是执行require(3)，因为 Browserify 似乎为模块提供了数字，但这些数字会发生变化，显然这是不可取的。

编辑：我目前的解决方案是这样做：

var shell = require('gulp-shell');

gulp.task('browserify', shell.task([
  'browserify -r ./src/bundle.js:bundle > ./build/bundle.js'
]))

如果我想充分利用 Gulp 管道，这是一种解决方法，并不是最佳选择。我想知道如何在没有命令行的情况下完成此操作，或者如果没有，为什么这只能通过 CLI 完成？

Answer 1

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 之间进行一些集成，而不仅仅是将 Browserify 捆绑操作包装在 Gulp 任务中（人们通常会这样做），那么您只需要vinyl-source-stream，例如在捆绑的输出上运行 Gulp 插件。例如，您可以这样做：

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

Answer 2

以下是我能想到的几种方法来完成您正在寻找的东西：

1.使用 .bundle() 方法：

看来.bundle() 方法可能是您需要的。它预装在browserify 中。尝试使用此代码进行试验。它允许你使用 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()
})

那么您应该可以将这个文件：./build/bundle.js 链接到一个 <script> 标记，如下所示：<script src="./build/bundle.js"></script>。

NPM 链接：vinyl-source-stream、browserify、gulp（您已经知道这些，但其他人可能还不知道。）

2。制作深层链接别名：

如果你想创建一个别名，它深度链接到外部 JS 类（不是 CSS 类），你必须尝试使用​​这样的 require() 方法调用：

const bundle = require('browserify').bundle

相当于：

import {bundle} from "browserify"

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

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() 的工作方式，以及混入其中的代码。您应该能够让它在您的计算机上工作。）

Answer 3

当使用 gulp 和 browserify 时，你需要安装 vinyl-source-stream 模块。 -r 标志在外部公开你的包中的模块，然后它们可以使用require 调用。

您可以配置多个条目并将配置移动到不同的文件，如果您只有一个条目文件，则可以将其传递给 browserify 并从选项中删除 entries。 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 选项。

似乎有一个gotcha 涉及使用non Commonjs 模块或未正确设置module.exports 的模块。

如果您想使用在此处作为 requirable 从另一个包中公开的模块（假设您有多个包），您可以：

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

在这种情况下，只要您在 bundle2 中需要 my-module，您就会从 bundle.js 中的 require 外部重新使用它。

如果您想通过一个 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's gulp tutorial 和browserify API 了解更多信息。