Requiring a sprockets-preprocessed file

[gabrielecirulli]

I'm trying to get sprockets to preprocess a file that contains a directive so that when I require() using browserify, it will contain the generated JavaScript.

This is my setup (within app/assets/javascripts):

system/
  rails_routes.js
application.js

application.js is the main file, and it starts the rest of the application. I would like to be able to do something like

var rr = require("./system/rails_routes.js");

in it.

In system/react_routes.js, I have the following:

//= require js-routes

console.log("Does this work?");

As an aside, I also configured js-routes to place the output in an object called module.exports, so to comply with the CommonJS model, as described in railsware/js-routes#121.

The only issue is that when I look at the generated bundle, the sprockets directive is still there and has not been expanded.

Is there a way to get this to work? What is the correct way to have sprockets preprocess a file before bundling it with browserify-rails?

[gabrielecirulli]

On closer inspection, the directives don't seem to get expanded if I put them in application.js either, even if I add it to config.assets.precompile. Is this normal?

EDIT: When I place it at the top of the file, the directive disappears but I don't seem to see the output of it.

[cymen]

My usage pattern is someting like:

lib/
 a.js
 b.js
main.js

I include main.js via a JavaScript include tag in a rails view. main.js would look something like this:

//= require some_js_from_sprockets

var a = require('./lib/a');
var b = require('./lib/b');

a(b());

In your example, is one JS file being requested by the browser? Or is it requesting multiple files?

The only place I use sprockets to pull in JS is before or at the first use of browserify. Within the browserify code, I never include anything via sprockets. Not sure if that is relevant but it seems like a good practice. The reason I do this is that I'm working on getting my JS out of my rails repo to somewhere else and be completely independent of Rails.

[gabrielecirulli]

Thanks for the answer! In my example, the file being requested is application.js. It is the entry point for the rest of the application, and all of the other scripts are bundled within it by browserify.

The reason why I need to get sprockets to work in that file is that it's the only way to somehow package the output of js-routes within a module. I'm not sure if there's any other way to do it, but this one is currently not working.

In the past few minutes I managed to make the application.js file somehow at least contain the output of js-routes (I don't know exactly how they get there, but at some point in the bundle I can see the generated route definitions). I think I might have done this by putting the sprockets directive in application.js.

The problem is still that I can't access that code in any way through a require(), although it is clearly within the bundle.

At the moment I'm trying the idea of changing the extension of the rails_routes file to .js.erb and somehow getting js-routes to output its definitions in there, so that I can then require it.

I'm not sure how to make sprockets preprocess a .js.erb file before browserify-rails kicks in, though.

[gabrielecirulli]

I just tried beautifying the output of the bundled source and the js-routes stuff is indeed within the file, but it's not actually inside the bundle. It's just propped there, above everything else and above the browserify prelude. This means browserify is completely unaware of it.

[gabrielecirulli]

I don't seem to be able to go the .js.erb path. Browserify will just ignore the existence of the file. I suppose it's not being preprocessed by sprockets in time for Browserify to pick it up.

[cymen]

@gabrielecirulli I would be happy to look at an example rails app with one or two routes and js-routes being pulled in as a module. I have a theory about why it is happening but I'd need to tinker with it to be sure. I can try setting it up but if this is easy for you, would you do so?

We actually use js-routes but I work on a project where we have an important web application and other frontend JS. We want to use it with both. So in the important web app, we use the js-routes global so that the other frontend can use it too. My approach is to wrap that global in a module.

We are moving to using better methods on the other frontend code so figuring out how to get this working is of interested to me.

[gabrielecirulli]

Hey Cymen, this is the solution I'm currently using: http://stackoverflow.com/a/27046271/151377
Basically, the only sort of straight-forward way to wrap js-routes as a module was to get rails to generate the file and configure js-routes to namespace to "module.exports". To do that, I actually had to fork js-routes (to impraise/js-routes). If you want you can also use that fork but I suggest you fork it for your own use because I'm planning on making some breaking changes and then getting it merged into upstream so I don't have to manage the repo.

If you want I can give you a slightly more detailed writeup of the solution I used or answer any question :)=

[cymen]

That looks good -- if you have a solution that will eventually get merged up that is great. I'm not in a rush so I can wait for that but I'm reading the link. I'll close this as it sounds like it is solved, right? Please reopen if you feel it should stay open.