Gulp + babelify + browserify问题

Question

我正在尝试使用browserify和babelify创建一个gulp任务。这是任务：

var gulp = require('gulp'); 
var browserify = require('gulp-browserify'); 
var source = require('vinyl-source-stream'); 
var babelify = require('babelify'); 

gulp.task('js', function() { 
    browserify('./resources/js/*.js') 
     .transform(babelify) 
     .bundle() 
     .pipe(source('*.js')) 
     .pipe(gulp.dest('./public/js')); 
}); 

我发现了几个示例代码，试图使用它们，但结果总是相同的。

当我运行任务，并保存我的example.js文件，会出现以下错误：

TypeError: browserify(...).transform is not a function

我在做什么错？

Answer 1

您正在混合使用browserify和gulp-browserify的API。

从gulp-browserify docs，你会想要做这样的事情：

var gulp = require('gulp') 
var browserify = require('gulp-browserify') 

gulp.task('js', function() { 
    gulp.src('./resources/js/*.js') 
    .pipe(browserify({ 
     transform: ['babelify'], 
    })) 
    .pipe(gulp.dest('./public/js')) 
}); 

---

编辑：由于这个问题首先回答，gulp-browserify has been abandoned并一饮而尽已经发展了很多。如果您想用较新版本的吞咽实现同样的效果，您可以使用follow the guides provided by the gulp team。

你会用类似下面的结束：

var browserify = require('browserify'); 
var babelify = require('babelify'); 
var gulp = require('gulp'); 
var source = require('vinyl-source-stream'); 
var buffer = require('vinyl-buffer'); 
var sourcemaps = require('gulp-sourcemaps'); 
var util = require('gulp-util'); 

gulp.task('default', function() { 
    var b = browserify({ 
    entries: './resources/test.js', 
    debug: true, 
    transform: [babelify.configure({ 
     presets: ['es2015'] 
    })] 
    }); 

    return b.bundle() 
    .pipe(source('./resources/test.js')) 
    .pipe(buffer()) 
    .pipe(sourcemaps.init({ loadMaps: true })) 
     // Add other gulp transformations (eg. uglify) to the pipeline here. 
     .on('error', util.log) 
    .pipe(sourcemaps.write('./')) 
    .pipe(gulp.dest('./public/js/')); 
});