运行 gulp/browserify 束上的多个转换
Running multiple transforms on gulp/browserify bundle
我有一个已导出到捆绑文件的 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/'));
};
你尝试过链接吗? 正确的解决方案在评论中
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/'));
};
虽然这个答案出现在已接受的答案之后,并且已接受的答案在一定程度上涵盖了这个问题,但我想说清楚而不需要浏览链接的 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'));
});
我有一个已导出到捆绑文件的 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/'));
};
你尝试过链接吗? 正确的解决方案在评论中
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/'));
};
虽然这个答案出现在已接受的答案之后,并且已接受的答案在一定程度上涵盖了这个问题,但我想说清楚而不需要浏览链接的 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'));
});