EzDevInfo.com

Source maps using gulp, Browserify, reactify, UglifyJS

I'm trying to get source maps for my JavaScript files working with Chrome. The problem with the current gulp script is that the source maps (that Browserify creates) lead to minified versions of files.

For example, let's say that app.jsx is an entry file for Browserify and it has require('a') and require('b') calls in it. app.jsx gets browserified, reactified and uglifyied and written to app.js as expected. However, all of the source maps references within module a and module b are also minified:

var gulp = require('gulp'),
    browserify = require('browserify'),
    watchify = require('watchify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    bundler;

bundler = browserify({
    entries: '/app.jsx',
    cache: {},
    packageCache: {},
    fullPaths: true
});

bundler
    .transform('reactify');
    .transform({
        global: true
    }, 'uglifyify');

bundler = watchify(bundler);
bundler.on('update', function() {
    return bundler
        .bundle()
        .pipe(source('app.js'))
        .pipe(buffer())
        .pipe(gulp.dest('/js'));
});

Any ideas of how to get this working?

browserify cannot find module 'react'

I have this bit of react code called main.js:

var React = require('react');

var Comment = React.createClass({
render: function(){
  return (
    <div className="comment">
      <h2 className="commentAuthor">
        {this.props.author}
      </h2>
      <span dangerouslySetInnerHTML={{__html:marked(this.props.children.toString(), {sanitize:true})}} />
    </div>
  );
}
});

And I am trying to use browserify and reactify with it:

browserify -t reactify main.js

But I am getting this error:

Error: Cannot find module 'react' from '/Users/jameslin/projects/reactjs/react-0.13.2'
    at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
    at process (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
    at ondir (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
    at load (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
    at onex (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
    at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
    at Object.oncomplete (fs.js:107:15)

Given that I have installed react and reactify npm modules by:

• npm install -g react
• npm install -g reactify

Browserify and Reactify source maps include full local path names

I use watchify/ browserify to create a bundle with debug source maps with this command-

watchify main.js -o bundle.js -v -d 

When I use Chrome DevTools to debug the resulting app, the source files are accessible in their orginal nested folder locations, visible in DevTools' Sources panel.

However when I run it through reactify with this command-

watchify main.js -t reactify -o bundle.js -v -d

Chrome DevTools shows all the source files in the same folder as bundle.js and the file name includes the full local path name.

I am finding this annoying and hard to identify the correct file both in the sources panel and in the individual tabs as the file is too long to display.

Does anyone know how to get around this so that the source files display in their original folder locations (as per pic 1). Thx

Is it necessary to install `node-jsx` if we use reactify

In my Nodejs application, I use React. I browserify + reactify to transform .jsx files to js files. I use this line of code in my entry js file :

require('node-jsx').install();

I noticed that node-jsx is deprecated. Do I still need to have this line if I already reactify my react files ?

Browserify + Gulp + React + Angular

There's a component in React I want to use in Angular. So, basically I'm using browserify and and gulp to bundle everything that involves the React component to put it in the client.

My problem comes when I use browserify. Here's my code.

My gulp task ----->

'use strict';

var gulp = require('gulp');
var browserSync = require('browser-sync');

var browserify = require('browserify');

var $ = require('gulp-load-plugins')();

gulp.task('browserify', function() {

    return browserify({
      entries: './src/app/components/picker/DatePickerComponent.jsx', //entry point for material-ui
      debug: true
    })
    .bundle()
    .pipe(gulp.src('build.js'))
    .pipe(gulp.dest('./dist/scripts'));
});

DatePickerComponent.jsx --->

'use strict';

var React = require('react');
var materialUI = require('material-ui');

var DatePicker = materialUI.DatePicker; 

var DatePickerComponent = React.createClass({
  render: function() {
    return (
      <DatePicker />
    );
  }
});

There's no errors but there's no output either. The entry file is the component of material-ui that I will load in the client and then I will just pick it up with Angular and convert it to a directive with ngReact. Any ideas where the problem might be?

Thanks.

Edit: Fixed. Turns out I wasn't saving the stream correctly.

Unable to run transformed jsx to js file in browser. Asking for in browser jsxtransformer

I am trying to use reactify for jsx transformation and I have done the transformation from jsx to regular js using reactify. But when I try to run my transformed js file, it's somehow not showing the content. But when I import in browser jsxtransformer then it's showing the content. I am not able to understand the error in my procedure. If someone knows about it, please help me. Thank You..

Browserify transform with reactify

I am trying to build a project using gulp. Unfortunately I am experiencing some trouble with it.

This is what my gulpfile.js looks like:

'use strict';

var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');
var reactify = require('reactify');

// add custom browserify options here
var customOpts = {
  entries: ['./js/app.js'],
  debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts)); 
b.transform(reactify);

// add transformations here
// i.e. b.transform(coffeeify);

gulp.task('js', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal

function bundle() {

  return b.bundle()
    // log errors if they happen
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source('bundle.js'))
    // optional, remove if you don't need to buffer file contents
    .pipe(buffer())
    // optional, remove if you dont want sourcemaps
    .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
       // Add transformation tasks to the pipeline here.
    .pipe(sourcemaps.write('./')) // writes .map file
    .pipe(gulp.dest('./js/build'));
}

The problem is that gulp is displaying an error indicating that some third party library has somewhere the illegal token '<' the file in question is written in the JSX syntax.

Yet, I don't have the problem when I run the following command:

browserify -g reactify js\app.js > js\build\bundle.js

Please, what is wrong with my gulpfile?

Thanks in advance to anybody seeking to help!

Edit: I suspect that the -g option makes it transform the jsx recursively to plain javascript, I'm trying to find out an equivalent in the watchify.transform function, unsuccessfully.