Reactivity、Browserify和Gulp:TypeError:Object#<转换>没有方法&#

Reactify, Browserify and Gulp: TypeError: Object #<Transform> has no method 'transform'

本文关键字:转换 gt 有方法 lt Object# Browserify Gulp TypeError Reactivity      更新时间:2023-09-26

这是通过命令行执行gulp scripts:时的错误

类型错误:对象#<Transform>没有方法"Transform"

这是gulpfile.js:

var gulp            = require ('gulp')
    , browserify    = require ('gulp-browserify')
    , source        = require ('vinyl-source-stream')
    , reactify      = require ('reactify');
gulp.task('scripts', function () {
  browserify('./assets/js/main.js')
    .transform(reactify)
    .bundle()
    .pipe(source('main.js'))
    .pipe(gulp.dest('./static/js'));
});
gulp.task('default', ['scripts']);

我真的不知道怎么解决这个问题。我在网上搜索了一下,但没有发现任何与我的具体错误接近的错误。

您的任务有一些问题。

首先,您必须使用gulp.src来获取main.js文件。其次,transformgullowbrowserfy的一个选项,而不是你想用管道传输流的东西,bundle也是如此。

gulp.task('scripts', function () {
  return gulp.src('./assets/js/main.js')
    .pipe(browserify({
      transform: [reactify]
    }))
    .pipe(gulp.dest('./static/js'));
});

如果你想要更像你第一次尝试的东西,你不需要gulpbrowserify,但browserify单独使用,这里有一篇关于如何将ReactJsbrowserifygulp一起使用的非常好的文章。

您将vinyl-source-streambrowserify一起使用,而不是与gulp-browserify一起使用。你把两者混在一起了。

var buffer = require('vinyl-buffer');
    ,source = require('vinyl-source-stream')
    ,browserify = require('browserify') //not gulp-browerify
    ,babelify = require('babelify')
    ,uglify = require('gulp-uglify')
    ;
gulp.task('scripts', function(){
  var bundler = browserify('./assets/js/main.js');
  return bundler
    .transform(babelify, {presets: ["es2015", "stage-1", "react"]})
    .bundle({standalone: 'noscope'})
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(gulp.dest('./static/js'));
});

来自https://github.com/gulpjs/gulp/issues/369


编辑:使用babelify而不是reatify(已弃用)