Question

这是通过命令行执行gulp scripts：

时的错误

TypeError：Object＃＆lt;变换＆gt;没有方法＆＃39;转换＆＃39;

这是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']);

我真的不知道如何解决这个问题。我在互联网上搜索过，但我发现的任何内容都与我的具体错误无关。

Answer 1

您的任务存在一些问题。

首先，您必须使用gulp.src来获取 main.js 文件。其次，transform是 gulp-browserify 的选项，而不是您想要管道流的内容，bundle也是如此。

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

如果您想要的东西更像是您的第一次尝试，那么您不需要 gulp-browserify ，而只需 browserify ，这里有一篇非常好的文章将 ReactJs 与 Browserify 和 gulp here一起使用。

Answer 2

您使用vinyl-source-stream browserify而不是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而不是remtify（已弃用）

Reactify，Browserify和Gulp：TypeError：Object＃<transform>没有方法＆＃39; transform＆＃39; </transform>

2 个答案: