Question

I am building a React.js Application, however I realized that my structure wasn't efficient, since I had a gulp script to 'build' my react app, but I still needed to add all the resources I used on my app inside my html, like:

  script(src='/js/vendor/react.js')
  script(src='/js/apps/RaidCatcher.js')

So, if inside my RaidCatcher I needed to use React I needed to include it on my html. Since I started wanting to use many more modules, I figured that if I found a way to use require inside my source React app and on gulp build it so all the requires were added to the compiled file, I wouldn't need to bother with adding script entries for every required module in my app on the HTML page.

This led me into building this task on gulp:

gulp.task('browserify', ['build-react'], function() {
  var b = browserify({
    entries: 'public/assets/js/apps/RaidCatcher.js',
    debug: true,
    // defining transforms here will avoid crashing your stream
    transform: [reactify]
  });

  return b.bundle()
    .pipe(source('./RaidCatcher.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    // Add transformation tasks to the pipeline here.
    // .pipe(uglify())
    .on('error', gutil.log)
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./public/assets/js/apps/'));
}

As expected my now /public/assets/js/apps/ has all the codes from all the requires I used in my app: Original:

/**
 * @jsx React.DOM
 */

var moment = require('moment');
var React = require('react');


var round = function (value, decimal_places) {
  c_p = "e+" + decimal_places;
  c_m = "e-" + decimal_places;
  return +(Math.round(value + c_p) + c_m);
}

var RaidItem = React.createClass({...

Builded:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
// shim for using process in browser

var process = module.exports = {};
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;
...

However, trying to use it on my page I get an error saying:

ReferenceError: React is not defined

if I removed the react.js call from my HTML, and if I kept it:

ReferenceError: RaidCatcher is not defined

So, even though I managed to compile everything in a single file, even with all the required modules apparently, I fail to use the React app after including the builded file.

Can anyone help me with this? I would really like to be able to keep all my dependencies inside their own apps, so anywhere I use it I can simply include the RaidCatcher.js instead of all its dependencies as well.

Thanks a lot.

Node.js + React.JS application with browserify not finding my app

0 个答案: