在gulp/browserify包上运行多个转换

Question

我有一个React组件导出到一个包文件。我已经成功地使用babelify进行了转换，但是，现在我想运行envify。我似乎无法弄清楚如何使用browserify运行多个转换。我认为这一定是可能的，但我不知道我的语法稍微偏离了，或者我需要编写自定义转换，或者我应该在我的package.json中指定转换。这里是我的吞咽文件中的代码：

var bundleComponent = function(bundler, source, component) { 
    //bundler is just browserify('./client/components/TVScheduleTab/render.js') 

    gutil.log('Bundling ' + component) 

    return bundler 
    //this throws an error 
    .transform(babelify, envify({ 
     NODE_ENV: 'production' 
    })) 
    .bundle() 
    .on('error', function(e){ 
     gutil.log(e); 
    }) 
    .pipe(source) 
    .pipe(gulp.dest('output/')); 
}; 

Answer 1

你试过链吗？ 正确的解决办法是在评论

var bundleComponent = function(bundler, source, component) { 
    //bundler is just browserify('./client/components/TVScheduleTab/render.js') 

    gutil.log('Bundling ' + component) 

    return bundler 
    //this throws an error 
    .transform(babelify) 
    .transform(envify({ 
     NODE_ENV: 'production' 
    })) 
    .bundle() 
    .on('error', function(e){ 
     gutil.log(e); 
    }) 
    .pipe(source) 
    .pipe(gulp.dest('output/')); 
}; 

Answer 2

尽管公认的答案后出现这个答案，并一定程度上接受了覆盖的问题，我想讲清楚，而不需要通过链接GitHub的问题进行导航。

链接，特别是与envify，应该是这样的：

// NOTE: the "custom" part 
var envify = require('envify/custom'); 

gulp.task('build-production', function() { 
    browserify(browserifyOptions) 
     .transform(babelify.configure(babelifyOptions)) 
     .transform(envify({ 
      NODE_ENV: 'production' 
     })) 
     .bundle() 
     .on('error', handleErrors) 
     .pipe(source('app.js')) 
     .pipe(buffer()) 
     .pipe(uglify({ mangle: false })) 
     .pipe(gulp.dest('./build/production/js')); 
});