“错误：路径必须是一个字符串”，同时使用browserify，babelify，gulp和watchify构建反应应用程序

Question

我试图在tutorial之后构建实现Gulp，Browserify，Babelify，Watchify和React构建过程。这是完整的代码，

gulpfile.js

var gulp = require('gulp');
var babelify = require('babelify');
var browserify = require('browserify');
var notify = require('gulp-notify');
var sourcemaps = require('gulp-sourcemaps');
var livereload = require('gulp-livereload');
var gutil = require('gulp-util');
var chalk = require('chalk');
var source = require('vinyl-source-stream');
var streamify = require('gulp-streamify');
var watchify = require('watchify');
var merge = require('utils-merge');
var duration = require('gulp-duration');
var uglify = require('gulp-uglify');

var path = {
  ENTRY_POINT: './js/App.js',
  DEST: './dist/',
  OUT: 'build.js',
  MINIFIED_OUT: 'build.min.js'
};

gulp.task('watch', function() {
  livereload.listen();
  var args = merge(watchify.args, {
    debug:true
  });

  var bundler = browserify(path.ENTRY_POINT, args)
      .plugin(watchify, {ignoreWatch: ['**/node_modules/**', '**/libs/**', '**/plugins/**']})
      .transform(babelify, {preset: ['es2015', 'react']});

  bundle(bundler);

  bundler.on('update', function() {
    bundle(bundler)
  });
});

function bundle(bundler) {
  var bundleTimer = duration('Javascript bundle time');

  bundler
      .bundle()
      .on('error', mapError)
      .pipe(source(path.MINIFIED_OUT))
      .pipe(streamify(uglify()))
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(sourcemaps.write('./map'))
      .pipe(gulp.dest(path.DEST))
      .pipe(notify({
        message: 'Generated file: <%= file.relative %>'
      }))
      .pipe(bundleTimer)
      .pipe(livereload);
}

function mapError(err) {
  if (err.fileName) {
    gutil.log(chalk.red(err.name)
        + ': ' + chalk.yellow(err.fileName.replace(__dirname + '/js/', ''))
        + ': ' + 'Line ' + chalk.magenta(err.lineNumber)
        + ' & ' + 'Column ' + chalk.magenta(err.columnNumber || err.column)
        + ': ' + chalk.blue(err.description));
  } else {
    gutil.log(chalk.red(err.name)
        + ': '
        + chalk.yellow(err.message));
  }
}

gulp.task('default', ['watch']);

的package.json

{
  "name": "Demo App",
  "version": "1.0.0",
  "description": "Admin Module for Demo App",
  "main": "js/App.js",
  "scripts": {
    "build": "browserify -e ./js/App.js -t [ babelify --presets [ es2015 react ] ] -o ./dist/bundle.min.js"
  },
  "dependencies": {
    "flux": "^2.1.1",
    "history": "^1.17.0",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-router": "^1.0.3"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "chalk": "^1.1.1",
    "gulp": "^3.9.0",
    "gulp-duration": "0.0.0",
    "gulp-livereload": "^3.8.1",
    "gulp-notify": "^2.2.0",
    "gulp-react": "^3.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-streamify": "^1.0.2",
    "gulp-uglify": "^1.5.1",
    "gulp-util": "^3.0.7",
    "utils-merge": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.6.1"
  },
  "browserify": {
    "transform": [
      "babelify",
      {
        "presets": [
          "es2015",
          "react"
        ]
      }
    ]
  },
  "author": "Sagun Pandey"
}

每当我尝试使用npm run build或gulp watch构建我的应用时，都会收到此错误：

Error: path must be a string

这一直有效，直到我使用reactify。我很感激这个问题的任何帮助。