Using Gulp to create browser friendly js file, including imports
<h1>Isomorphic React</h1>

<p>I would like to transpile my react components server side into one <code>bundle.min.js</code> file. The issue I am having is that the file doesn't resolve import statements. </p>

<p>This is the file I would like to transpile (<strong>client/component.js</strong>)</p>

<pre><code>import React from 'react';
import ReactDom from 'react-dom';
import App from './components/app';

ReactDom.render(&lt;App /&gt;, document.getElementById('app'));
</code></pre>

<p>The result is this (<strong>bundle.min.js</strong>)</p>

<pre><code>'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _app = require('./components/app');

var _app2 = _interopRequireDefault(_app);

function _interopRequireDefault(obj) { return obj &amp;&amp; obj.__esModule ? obj : { default: obj }; }

_reactDom2.default.render(_react2.default.createElement(_app2.default, null), document.getElementById('app'));
</code></pre>

<p>But this is not what I want. </p>

<h3>Files I require</h3>

<p>I need all the import statements removed and replaced with the actual files that I need. In my case I require</p>

<ul>
<li>some files from node modules</li>
<li>some component files</li>
</ul>

<h3>Gulp function so far</h3>

<pre><code>// builds the components and clientside
gulp.task('buildComponentsClient', () =&gt;
  gulp.src(['./client/*.js'])
  .pipe(include()).on('error', console.log)
  .pipe(babel({ presets: ['es2015', 'react']}))
  .pipe(concat('bundle.js'))
  // .pipe(uglify({mangle: false}))
  .pipe(rename('bundle.min.js'))
  .pipe(gulp.dest('./public'))
);
</code></pre>

<h1>Question</h1>

<p>How do i create a browser friendly file with all dependencies that are specified in these minimalistic react element files?</p>