Hacker News Reader

Comment by dugmartin | Hacker News Reader

I've been working on a front-end project in CoffeeScript using React and running Browserify via Gulp has been both a great time saver and has helped keep my project organized.

One tip I can give is that I ended up organizing each of my React components and mixins as a module in their own folders and files and my gulpfile adds the parent source path to the NODE_PATH environment variable. By adding the coffeeify transform and .coffee extension to the browserify gulp task I can just do this in my code:

    SomeComponent = require 'react-components/some-component'
    SomeMixin = require 'react-mixins/some-mixin'

No need to worry about relative paths or if it is CoffeeScript code or plain Javascript.

The other tip is to NOT require react within your browserfied code. Just load it as a script tag before your browserfied code and use window.React to get a reference.

View on HN

Huh, care to expand on why you shouldn't `require` React? Just doesn't play nicely with Browserify?

Because writing the require statement in every file is annoying, probably. I do something similar with jQuery - I require it in my bootstrap file, then do

    window.$ = jQuery

Global variables are a bad thing until they're a really convenient thing.

protip, global.$ = jQuery;

Yeah, sorry I wasn't clear why. The first is that React is pretty large so it slows down the watch/build cycle enough that there is a lag and second is that in production React can be loaded via a cdn. Since everything is bundled into one file with Browserify its better for the end user download speed if you pull 3rd party libs out.

I also didn't give the main reason for using the NODE_PATH method. Browserify doesn't resolve duplicate relative paths so if you have a structure like this:

    /src
      main.js
      components/a.js
      components/foo/b.js
      components/foo/c.js

and a.js requires c.js via relative paths:

    require('./foo/c.js')

and b.js also requires c.js via

    require('./c.js')

then c.js is included twice in your bundled code since Browserify uses the pure string path as the key. If instead you put /src in your NODE_PATH you can do this in a.js:

    require('components/foo/c.js')

and this in b.js

    require('components/foo/c.js')

and c.js will only be bundled once since it has the same path.

I've just started with browserify and react this week. Can you point to some example or documentation that describes the "double include" issue you talk about? I wasn't aware of this possible problem!

I'm not sure that's accurate.. I've been using Browserify for some time, and write code like that pretty much all over (require('../lib/api'), require('./api'), etc.) without having file duplication issues in the bundled output. Do you have an example that exhibits the problem?

Also, if you're requiring large files that you know won't need processing by browserify (like react), you can use the 'noparse' option to prevent the performance hit during bundling. (Of course a cdn is potentially a better option.)

Reply on news.ycombinator.com