Using gulp-babel gives Uncaught ReferenceError: require is not defined
<p>I am using the following gulp.js file</p>

<pre><code>var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('bundle', bundle);

function bundle () {
     gulp.src('./src/*.jsx')
    .pipe(babel())
    .pipe(gulp.dest('./dist'));
}

gulp.task('build', ['bundle']);
</code></pre>

<p>Before transpile "main.jsx" content</p>

<pre><code>import React from 'react';
</code></pre>

<p>After Transpile, "js" files generated in the dist folder, has require('')</p>

<pre><code>var _react = require('react');
</code></pre>

<p>while requesting for the page index.html</p>

<pre><code> &lt;body&gt;

    &lt;div id="app" &gt;&lt;/div&gt;
    &lt;script src="main.js"&gt;&lt;/script&gt;

&lt;/body&gt;
</code></pre>

<p>Uncaught ReferenceError: require is not defined is shown in the console.</p>

<p>I know there is something wrong in the build task, but i am unable to figure out.</p>