Gulp + babelify + browserify问题

Question

Gulp + babelify + browserify问题

5

我正在尝试使用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。我做错了什么？

- pkovzz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ross Zurowski · Accepted Answer

你混淆了browserify和gulp-browserify的API。

根据gulp-browserify文档，你需要像这样做：

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已被放弃，而gulp已经发展了很多。如果您想使用较新版本的gulp实现相同的功能，可以按照gulp团队提供的指南进行操作。

最终的结果将类似于以下内容：

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