javascript – 如何同时使用’gulp-babel’和’gulp-browserify’

我尝试编写这些代码

gulp.task('script',function() {
  'use strict'
  return gulp.src(['app.js','components/**/*.jsx'])
    .pipe(babel())
    .pipe(browserify())
    .pipe(gulp.dest("dist"));
});

但它显示了一些错误：

SyntaxError: 
/Users/Zizy/Programming/learn-react-js/components/CommentBox.jsx:58
    <div className="commentBox">
    ^
ParseError: Unexpected token
    at wrapWithPluginError (/Users/Zizy/Programming/learn-react-js/node_modules/gulp-browserify/index.js:44:10)

似乎在.pipe(browserify())之前gulp没有改变jsx代码.但是,如果我只是删除.pipe(browserify())我发现它确实发生了转变,只是不能让babel和browserify一起工作.

我知道也许我可以使用像babelify或browserify插件为babel,我只想找出原因.

解决方法

gulp-browserify并不像那样工作.你没有给它收集一堆缓冲区来收集和捆绑.

你给它一个文件 – 条目文件 – 它传递给browserify. browserify检查以查看条目文件引用的其他文件,然后直接从文件系统加载这些文件,这意味着您无法事先使用gulp插件修改它们.

所以,实际上,如果我们假装您不想在源文件上使用Babel,那么您的gulpfile应该如下所示,只传入条目文件：

gulp.task('script',function() {
  'use strict'
  return gulp.src('app.js')
    .pipe(browserify())
    .pipe(gulp.dest("dist"));
});

但请注意,不再维护gulp-browserify,这正是原因所在. gulp插件不应该直接从文件系统中读取.这就是为什么你应该直接使用browserify(或者,在你的情况下,Babelify)使用vinyl-source-stream as recommended in the gulp recipes.它更惯用,更少混淆.

这包含了我对你的问题的答案,但我想补充一点：如果你使用ES2015模块语法(你可能应该这样),那么有更好的方法来做到这一点. browserify将所有模块分别包装在一堆代码中,以使编程的Commonjs API正常工作,但ES2015模块具有声明性语法,这使得工具更容易静态地对它们进行操作.有一个名为Rollup的工具可以利用这一点,允许它生成比browserify更小,更快,更加迷你的捆绑.

这是你如何使用gulp：

var gulp = require('gulp'),rollup = require('rollup-stream'),babel = require('gulp-babel'),source = require('vinyl-source-stream'),buffer = require('vinyl-buffer');

gulp.task('script',function() {
  return rollup({entry: 'app.js'})
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(babel())
    .pipe(gulp.dest('dist'));
});