Browserify fails to create bundle with babelify transform (TypeError: Path must be a string.)
Browserify fails to create bundle with babelify transform (TypeError: Path must be a string.)
我已经编写了一个 gulp 任务来使用 watchify 和 babelify 作为转换将我的 .jsx 和 .js 脚本编译成一个包。出于某种原因,我的 gulp 脚本似乎在转换时被阻塞了,我不确定为什么:
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()
的结果是文件数据的标准节点流。您正在获取数据并将其传递给 rename
,后者需要 Gulp File
个对象流。
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
。
我已经编写了一个 gulp 任务来使用 watchify 和 babelify 作为转换将我的 .jsx 和 .js 脚本编译成一个包。出于某种原因,我的 gulp 脚本似乎在转换时被阻塞了,我不确定为什么:
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()
的结果是文件数据的标准节点流。您正在获取数据并将其传递给 rename
,后者需要 Gulp File
个对象流。
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
。