Browserify 无法使用 babelify 转换创建包(TypeError:路径必须是字符串.) [英] Browserify fails to create bundle with babelify transform (TypeError: Path must be a string.)

问题描述

我编写了一个 gulp 任务，使用 watchify 和 babelify 作为转换将我的 .jsx 和 .js 脚本编译成一个包.出于某种原因，我的 gulp 脚本似乎在转换时卡住了，我不确定为什么:

I've written a gulp task to compile my .jsx and .js scripts into a bundle using watchify and babelify as a transform. For some reason my gulp script seems to be choking on the transform and I'm not sure why:

gulp.task('browserify', function() {
  var bundle = watchify(browserify('./app/jsx/client/index.jsx', {
    extensions: ['.js', '.jsx'],
    debug: process.env.NODE_ENV === 'development'
  }));
  bundle.transform(babelify);
  bundle.on('update', function() {
    rebundle(bundle);
  });


  function rebundle(bundle) {
    return bundle.bundle()
    .on('error', function(error) {
      console.log(error.stack, error.message);
      this.emit('end');
    })
    .pipe(
        gulpif(
          (process.env.NODE_ENV == 'production'),
          require('gulp-rename')('bundle.min.js'),
          require('gulp-rename')('bundle.js')
        )
    )
    .pipe(gulpif((process.env.NODE_ENV == 'production'), buffer()))
    .pipe(gulpif((process.env.NODE_ENV == 'production'), uglify()))
    .pipe(gulp.dest('dist/js'));
  }

  return rebundle(bundle);
});

在控制台中...

path.js:8
    throw new TypeError('Path must be a string. Received ' +
    ^

TypeError: Path must be a string. Received undefined
    at assertPath (path.js:8:11)
    at Object.posix.join (path.js:480:5)
    at Transform.stream._transform (/home/zipp/search-admin/node_modules/gulp-rename/index.js:52:22)
    at Transform._read (_stream_transform.js:167:10)
    at Transform._write (_stream_transform.js:155:12)
    at doWrite (_stream_writable.js:292:12)
    at writeOrBuffer (_stream_writable.js:278:5)
    at Transform.Writable.write (_stream_writable.js:207:11)
    at Readable.ondata (/home/zipp/search-admin/node_modules/browserify/node_modules/read-only-stream/node_modules/readable-stream/lib/_stream_readable.js:572:20)
    at emitOne (events.js:77:13)
    at Readable.emit (events.js:169:7)

推荐答案

那个错误是因为你需要一个 vinyl-source-stream 在那里..bundle() 的结果是一个标准的 Node 文件数据流.您正在将该数据传递给 rename ，它需要 Gulp File 对象流.

That error is because you need a vinyl-source-stream in there. The result of .bundle() is a standard Node stream of file data. You are taking that data are passing it to rename which expects a stream of Gulp File objects.

var source = require('vinyl-source-stream');

// stuff

  function rebundle(bundle) {
    return bundle.bundle()
    .on('error', function(error) {
      console.log(error.stack, error.message);
      this.emit('end');
    })
    .pipe(
        gulpif(
          (process.env.NODE_ENV == 'production'),

          // Use 'source' here instead, which converts binary
          // streams to file streams.
          source('bundle.min.js'),
          source('bundle.js')
        )
    )
    .pipe(gulpif((process.env.NODE_ENV == 'production'), buffer()))
    .pipe(gulpif((process.env.NODE_ENV == 'production'), uglify()))
    .pipe(gulp.dest('dist/js'));
  }

您可以使用source来定义文件的初始名称，而不是使用rename.

Instead of using rename, you can use source to define the initial name of the file.

这篇关于Browserify 无法使用 babelify 转换创建包(TypeError:路径必须是字符串.)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！