CODEWITHSUNDEEP
reactjsgulpbrowserifybabeljs
Aftab Naveed
Aftab Naveed

Reputation: 3879

ReactJS Browserify and Babel

Sorry if this sound a very basic question but I am new to gulp and browserify. I have a gulp task file 

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

gulp.task('bundle', function(){
    return browserify({
        extensions: ['js', 'jsx'],
        entries: 'assets/js/src/main.js'
    })
        .transform(babelify.configure({
            ignore: /(bower_components)|(node_modules)/
        }))
        .bundle()
        .on('error', function(err){
            console.log('Error : ' + err.message);
        })
        .pipe(source('app.js'))
        .pipe(gulp.dest('assets/js/'));
});

// Watch JS/JSX and Sass files
gulp.task('watch', function() {
    gulp.watch('assets/js/src/**/*.{js,jsx}', ['bundle']);
});

Here I want to transpile my code to ES2015 but I am not sure what assets/src/main.js file in browserify task should have. My question would be, is main.js just an entry point for browserify? If yes then what should it have?

Upvotes: 0

Views: 83

Answers (1)

Jeremy Colin
Jeremy Colin

Reputation: 464

entries would be the entry point of your react application so where reactDOM render is done and where your app is declared, for example it can contain:

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

Upvotes: 0

Related Questions