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

【问题标题】：Running multiple transforms on gulp/browserify bundle在 gulp/browserify 包上运行多个转换
【发布时间】：2015-10-13 17:05:02
【问题描述】：

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

 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/'));
};

【问题讨论】：

标签： node.js reactjs gulp browserify

【解决方案1】：

你试过链接吗？ 正确的解决方案在 cmets 中

 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/'));
};

【讨论】：

是的，我还尝试添加将它们作为数组传递，并在我传递给 browserify 的对象中指定它们。我的 package.json 中也有 "browserify": { "transform": [ "browserify-shim" ] },。不确定这是否有任何干扰。
这似乎也很重要，但你需要 envify 的方式并不明显 - github.com/hughsk/envify/issues/7#issuecomment-45418761
谢谢！当我使用 browserify({ 'entries': ['./client/components/TVScheduleTab/render.js'], 'transform': [[babelify], ['envify', {'global': true, NODE_ENV: 'production'}]] } 时它起作用了
需要注意的是envify要通过require('envify/custom')导入

【解决方案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'));
});

【讨论】：