CODEWITHSUNDEEP
javascriptnode.jsgulpisomorphic-javascript
Joe Lloyd
Joe Lloyd

Reputation: 22323

Using Gulp to create browser friendly js file, including imports

Isomorphic React

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

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

import React from 'react';
import ReactDom from 'react-dom';
import App from './components/app';

ReactDom.render(<App />, document.getElementById('app'));

The result is this (bundle.min.js)

'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 && obj.__esModule ? obj : { default: obj }; }

_reactDom2.default.render(_react2.default.createElement(_app2.default, null), document.getElementById('app'));

But this is not what I want.

Files I require

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

Gulp function so far

// builds the components and clientside
gulp.task('buildComponentsClient', () =>
  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'))
);

Question

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

Upvotes: 0

Views: 652

Answers (1)

cfz42
cfz42

Reputation: 384

From what I understand you wan't to use browserify coupled with babelify. Here is my gulp task for this:

import gulp from 'gulp';
import glob from 'glob';
import browserify from 'browserify';
import babelify from 'babelify';
import rename from 'gulp-rename';
import source from 'vinyl-source-stream';
import es from 'event-stream';
import uglify from 'gulp-uglify';
import buffer from 'vinyl-buffer';

const path = './client/';
const files = '*.js';
const bundles = [path + files]; // I use an array to be able to bundle
                                // multiple paths within the same task

gulp.task('bundle', () => {
  let bundleAll = bundles.map(bundle);

  return Promise.all(bundleAll); // Task ends when all bundles are done
});

// Bundle files found in bundlePath, returns a Promise resolved
// when all files have been processed
function bundle(bundlePath) {
  return new Promise((resolve, reject) => {
    glob(bundlePath, (err, files) => {              // Create glob from path
      var tasks = files.map(file => {               // loop through each file
        return browserify(file)                     // pass it to browserify
          .transform(babelify, ["es2015", "react"]) // using babelify (browserify + babel)
          .bundle()                                 // ..profit!
          .on('error', err => {
            console.error('err', err.toString());
            reject(err);
          })
          .pipe(source(file)) // this is required for browserify output to be use as a gulp stream
          .pipe(buffer())     // needed by gulp-uglify
          .pipe(uglify())
          .pipe(rename({ 'bundle.min.js' }))
          .pipe(gulp.dest('./public'));
      });
      es.merge(tasks).on('end', resolve); // When all files have been processed, resolve the promise we returned
    });
  });
}

Upvotes: 2

Related Questions