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