title: Using gulp-babel gives Uncaught ReferenceError: require is not defined
body: <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>