如何使用流作为 Browserify 的输入？

Question

在 Gulp 中，我正在尝试编译 TypeScript，将其连接起来，然后通过 Browserify 运行它以处理 requires（如果处于生产模式，则在之后进行 uglify）。

This sample code 是我发现的最接近我正在尝试做的事情，但是它使用了一个中间文件。如果可能的话，我宁愿将内容保留在流中以避免中间文件的开销。

既然 Browserify 输出一个流，它似乎也应该知道如何接受一个流。

相关代码：

var gulp = require('gulp');
var browserify = requ
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var transform = require('vinyl-transform');
var typeScript = require('gulp-typescript');

gulp.task('scripts', function () {
    return gulp.src([mySrcDir,'typings/**/*.d.ts'])
        .pipe(sourcemaps.init())
        .pipe(typeScript(typeScriptProject))
        .pipe(concat('main.js'))
        .pipe(transform(function (filename) {
            return browserify(filename).bundle();
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(ns.outDir))
        // Reload, notify...
        ;

结果：

Error: Cannot find module 'C:\path\to\project\root\src\main.js' in 'C:\path\to\project\root'

当我省略连接时，结果是相同的，除了 foobar.js 而不是 main.js 其中foobar.ts 是输入文件之一。

第二次尝试

gulp.task('scripts', function () {
    var stream = gulp.src([mySrcDir,'typings/**/*.d.ts'])
        .pipe(sourcemaps.init())
        .pipe(typeScript(typeScriptProject))
        .pipe(concat('main.js'));
    var bundleStream = ns.browserify(stream).bundle().on('error', errorHandler);
    // and then...

一个新错误

C:\path\to\project\root\_stream_0.js:1
[object Object]
        ^
ParseError: Unexpected token

Answer 1

您不能将 vinyl 流传递给 browserify。它只接受text 或buffer 流。唯一的解决方案是将输入的vinyl流转换为browserify可以掌握的text流：

var gutil = require('gulp-util')
var through = require('through2')
var intoStream = require('into-stream')

// ...
.pipe(through.obj(function(file, encoding, next) {
  bundle = browserify(intoStream(file.contents))
  this.push(new gutil.File({
    path: 'index.js',
    contents: bundle.bundle()
  }))
  next()
}))

Answer 2

看看gulp-browserify，它是browserify的gulp插件。

例子：

gulp.src([mySrcDir,'typings/**/*.d.ts'])
    .pipe(sourcemaps.init())
    .pipe(typeScript(typeScriptProject))
    .pipe(concat('main.js'))
    .pipe(browserify(options)
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(ns.outDir))
    // Reload, notify...
    ;

关于选项，您可以参考上面发布的链接