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

Question

在 Gulp 中，我尝试编译 TypeScript，连接它，然后通过 Browserify 运行它来处理 require(然后在生产模式下 if 之后进行 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...
        ;

结果:

错误:在“C:\path\to\project\root”中找不到模块“C:\path\to\project\root\src\main.js”

当我省略连接时，结果是相同的，除了 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()
}))