Require JS files similar to require_tree

[jekuno]

I have already been trying to get a working gulp-rails-pipeline for several days now and am stuck with a beginners question.

Let's say I have two JS models:

# javascripts/models/monkey.js.coffee
class App.Models.Monkey
  constructor: (@name) ->
    # do some setup

and

# javascripts/models/zoo.js.coffee
class App.Models.Zoo
  constructor: () ->
    monkey = new App.Models.Monkey("Charley")
    # ...

If I use Rails Sprockets I can simply add //= require_tree ./models to my application.js. Then I have access to App.Models.Monkey from within App.Models.Zoo out of the box (see example on top). Plain and simple!

Now gulp-rails-pipeline inspired me to ditch the Rails Asset Pipeline.

My question: How can I access my existing JavaScript classes within their namespace so that I can e.g. call new App.Models.Monkey("Charley") from App.Models.Zoo? (see the example on top)

Is there something simliar to require_tree for browserify? Is there something which allows me to simply leave all files as they are, bundle them to one big JS file AND references to e.g. App.Models.Monkey will somehow still magically work?

If not so: Is there some helper which can magically turn all of my classes into RequireJS modules?

Or do I need to turn all of my Models, Controllers, Routers, Views... into RequireJS modules manually (which will result in adding many module.exports and require statements)?

Any help would be highly appreciated. :)

[greypants]

It's actually not RequireJS, it's CommonJS style modules. Yeah, part of the point of modules is that you don't have to namespace anymore - nothing is exposed on the window, and everything is explicitly required.

# javascripts/models/monkey.js.coffee
module.exports = class Monkey
  constructor: (@name) ->
    # do some setup

# javascripts/models/zoo.js.coffee
Monkey = require('./monkey.js.coffee')

module.exports = class Zoo
  constructor: () ->
    monkey = new Monkey("Charley")
    # ...

I wrote a little blurb on modules on my gulp-starter wiki: https://github.com/greypants/gulp-starter/wiki/What-is-a-Module%3F

That might help. If you reaaally wanted to rely on globals and namespaces, you can just change App to window.App and use the require-dir module. But that kind of misses the point.

[bhgames]

@greypants I've tried using require-dir so I dont have to manually include every directive, controller, and service file in my app(of which there are nearly 100.) It doesn't work because fs doesn't work on the frontend. How do I require all the files?

[bhgames]

Is it really realistically expected of JS developers to include each one of the hundreds of files they inevitably have in a large project, one at a time? I have been stuck for hours and feel I am missing something here.