javascript - dest.write 不是 gulp 中带有 broswerify 的函数

Question

我尝试使用 gulp 和 browserify 构建我的 React 项目。但每次我尝试构建 bundle 时，我都会收到此错误:

[16:19:54] Using gulpfile /var/www/html/new-webclass/gulpfile.js
[16:19:54] Starting 'build'...
[16:19:54] 'build' errored after 36 ms
[16:19:54] TypeError: gulp.src(...).pipe(...).pipe is not a function
    at Gulp.<anonymous> (/var/www/html/new-webclass/gulpfile.js:80:6)
    at module.exports (/var/www/html/new-webclass/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/var/www/html/new-webclass/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/var/www/html/new-webclass/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/var/www/html/new-webclass/node_modules/orchestrator/index.js:134:8)
    at /usr/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/index.js:46:20
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:592:11)
    at run (bootstrap_node.js:394:7)
/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623
    var written = dest.write(chunk);
                       ^

TypeError: dest.write is not a function
    at write (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:632:7)
    at DestroyableTransform.pipeOnReadable (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:664:5)
    at emitNone (events.js:86:13)
    at DestroyableTransform.emit (events.js:185:7)
    at emitReadable_ (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:448:10)
    at emitReadable (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:444:5)
    at readableAddChunk (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:187:9)
    at DestroyableTransform.Readable.push (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:149:10)
    at DestroyableTransform.Transform.push (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_transform.js:145:32)

TypeError: dest.write 不是函数。好吧，这很奇怪。我找不到任何解决方案。

package.json(仅限 devDependencies)

devDependencies": {
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babelify": "^7.3.0",
    "bootstrap-sass": "^3.3.7",
    "browserify": "^13.1.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-pug": "^3.0.4",
    "gulp-sass": "^2.3.2",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  }

下面是我的 gulpfile 要求部分。

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const pug = require('gulp-pug');
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');

这里是我用于捆绑的任务。

gulp.task('build', function() {
  return gulp.src('./react/index.jsx')
    .pipe(browserify({
      extensions: ['.jsx'],
      debug: true,
      cache: {},
      packageCache: {},
      fullPaths: true
    }))
    .pipe(babelify.configure({ presets: ['es2015', 'react', 'stage-0'] }))
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(gulp.dest('./public/react/'));
});

还有其他方法可以进行捆绑吗？出了什么问题？

Answer 1

我花了一段时间(实际上是一整天)才弄明白。整个配置都是错误的。这是正确的:

gulp.task('build', function() {
  return browserify({
      extensions: ['.jsx', '.js'],
      debug: true,
      cache: {},
      packageCache: {},
      fullPaths: true,
      entries: './react/index.js',
    })
    .transform(babelify.configure({ 
        presets: ['es2015', 'react', 'stage-0'],
        ignore: /(bower_components)|(node_modules)/
    }))
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./public/react'));
});

来源:Using React with ES6 and Browserify by wecodetheweb.com