使用gulp和babelify时出现错误？

Question

这是我的gulp文件

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('build', function () {
    return browserify({entries: 'main.js', extensions: ['.js'], debug: true})
    .transform(babelify)
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('dist'));
});

gulp.task('watch', ['build'], function () {
    gulp.watch('main.js', ['build']);
});

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

这是我的main.js

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

解析文件main.js时出现错误:unexcepted token (5:2)。我已经检查了我的代码好几次了，还是不知道为什么？

Answer 1

请尝试在下面运行此命令，并将gulp.task()方法更改为下面。

npm i babel-preset-react

gulp.task('build', function () {
    return browserify({entries: 'main.js', extensions: ['.js'], debug: true})
    .transform(babelify.configure({
        presets: ["react"]
}))
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('dist'));
});