Ошибка при использовании gulp и babelify?

Question

Это мой Глоток файл

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') 
); 

Существует ошибка: unexcepted маркер (5: 2), а при разборе main.js. файлов Я проверил свой код serveral раз, до сих пор не знаю почему?

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')); 
});