Browserify-Gulp集成

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

带有expose选项的

b.require()。

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

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
}

潜力＆＃34; Gotchya＆＃34;：如果外部依赖关系没有返回JSON对象，那么.bundle将返回undefined。例如，这会阻止.bundle中的require('browserify').bundle工作：

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

在尝试第一个代码示例后，如果您需要Gulp的其他帮助，请告诉我。（它混合了gulp.task()，browserify()，.bundle()和.pipe()如何协同工作，以及您的代码混合在一起。您应该能够获得它可以在您的计算机上运行。）

Answer 3

在浏览器中使用gulp时，需要安装vinyl-source-stream模块。 -r标记会在您的外部包含外部模块，然后可以使用require调用这些模块。

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

关于使用non Commonjs模块或模块没有正确设置module.exports，看起来有gotcha。

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

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

在这种情况下，只要您在my-module内需要bundle2，就可以从require的{{1}}外部对其进行重新授权。

如果您想通过一次要求调用允许在捆绑包外部使用多个文件，则可以将其作为bundle.js传递。

array

您可以查看Stefan Imhoff's gulp tutorial和browserify API了解详情。

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

3 个答案:

Browserify-Gulp集成