CODEWITHSUNDEEP
gulpbrowserifybabeljs
D.hao
D.hao

Reputation: 1

An error when use gulp and babelify?

This is my gulp file

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

Here is my main.js

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

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

There is an error:unexcepted token (5:2) while parsing file main.js. I have checked my code serveral times, still don't know why?

Upvotes: 0

Views: 464

Answers (1)

Kohei TAKATA
Kohei TAKATA

Reputation: 81

Please try to run this command below and change gulp.task() method to below.

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

Upvotes: 1

Related Questions