javascript Gulp + babelify + browserify 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33187695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Gulp + babelify + browserify issue
提问by pkovzz
I'm trying to create a gulp task with browserify and babelify. Here is the task:
我正在尝试使用 browserify 和 babelify 创建一个 gulp 任务。这是任务：
var gulp = require('gulp');
var browserify = require('gulp-browserify');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
gulp.task('js', function () {
browserify('./resources/js/*.js')
.transform(babelify)
.bundle()
.pipe(source('*.js'))
.pipe(gulp.dest('./public/js'));
});
I found a few sample code, tried to use them, but the result was always the same.
我找到了一些示例代码，尝试使用它们，但结果始终相同。
When i run the task, and save my example.js file, the following error occurs:
当我运行任务并保存我的 example.js 文件时，出现以下错误：
TypeError: browserify(...).transform is not a function
TypeError: browserify(...).transform is not a function
What am I doing wrong?
我究竟做错了什么？
回答by Ross Zurowski
You're mixing up the API for browserifyand gulp-browserify.
您正在混淆browserify和的 API gulp-browserify。
From the gulp-browserify docs, you'll want to do something like this:
从gulp-browserify docs，你会想要做这样的事情：
var gulp = require('gulp')
var browserify = require('gulp-browserify')
gulp.task('js', function () {
gulp.src('./resources/js/*.js')
.pipe(browserify({
transform: ['babelify'],
}))
.pipe(gulp.dest('./public/js'))
});
EDIT:Since this question was first answered, gulp-browserify has been abandonedand gulp has evolved a great deal. If you'd like to achieve the same thing with a newer version of gulp, you can follow the guides provided by the gulp team.
编辑：自从第一次回答这个问题以来，gulp-browserify 已经被放弃，gulp 已经发展了很多。如果您想使用较新版本的 gulp 实现相同的目标，您可以按照 gulp 团队提供的指南进行操作。
You'll end up with something like the following:
你最终会得到如下结果：
var browserify = require('browserify');
var babelify = require('babelify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var util = require('gulp-util');
gulp.task('default', function () {
var b = browserify({
entries: './resources/test.js',
debug: true,
transform: [babelify.configure({
presets: ['es2015']
})]
});
return b.bundle()
.pipe(source('./resources/test.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
// Add other gulp transformations (eg. uglify) to the pipeline here.
.on('error', util.log)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./public/js/'));
});
