Multiple Files communication with coffeescript

Question

When I create a new coffeescript file, I cannot access the code in the compiled code from another file because it gets wrapped in some function scope. For example:

CoffeeScript:

class ChatService
  constructor: (@io) ->

Generated Javascript:

(function() {
  var ChatService;    
  ChatService = (function() {    
    function ChatService(io) {
      this.io = io;
    }    
    return ChatService;    
  })();    
}).call(this);

When trying to call ChatService in another file, it's not defined. How do I handle multiple files with coffeescript?

Answer 1

Depending on whether this is client- or server-side code, there are two slightly different approaches.

Client-side: Here we attach things that should be available across files to the global namespace (window) as follows:

class window.ChatService
  constructor: (@io) ->

Then, in another file both ChatService and window.ChatService will allow access to the class.

---

Server-side: Here we must use exports and require. In the ChatService.coffee file, you would have the following:

class exports.ChatService
  constructor: (@io) ->

Then, to get at it from another file you can use:

ChatService = require('ChatService.coffee').ChatService

Note: If there are multiple classes that you are getting from ChatService.coffee, this is one place where CoffeeScript's dict unpacking really shines, such as:

{ChatService, OtherService} = require('ChatService.coffee')

---

Both: Basically, we choose whether to run server-side or client-side code based on which environment we're in. A common way to do it:

class ChatService
  constructor: (@io) ->

if typeof module != "undefined" && module.exports
  #On a server
  exports.ChatService = ChatService
else
  #On a client
  window.ChatService = ChatService

To get it:

if typeof module != "undefined" && module.exports
  #On a server
  ChatService = require("ChatService.coffee").ChatService
else
  #On a client
  ChatService = window.ChatService

The else clause of the second block can be skipped, since ChatService already refers to the reference attached to window.

If you're going to define a lot of classes in this file, it may be easier to define them like:

self = {}

class self.ChatService

And then attach them like module.exports = self on the server and _.extend(window, self) on the client (replace _.extend with another extend function as appropriate).

Answer 2

The usual approach is to define a global namespace in window:

window.App = { }

That would go somewhere in your application's initialization code before anything else happens. And then, for your class:

class App.ChatService
  constructor: (@io) ->

That allows you to reference your class through App anywhere you want and you don't have to worry about polluting the global namespace:

chatter = new App.ChatService

If you wanted to make your ChatService truly global then you could use class window.ChatService but I'd recommend against that except in the most trivial of applications.

AFAIK, node.js has something similar to window but I'm not familiar enough with node.js to tell you what it is.

Answer 3

Separate your classes with namespaces and use cake to compile them all in one (or more) resulting .js file(s). Cakefile is used as configuration which controls in which order your coffee scripts are compiled - quite handy with bigger projects.

Cake is quite easy to install and setup, invoking cake from vim while you are editing your project is then simply

:!cake build

and you can refresh your browser and see results.

As I'm also busy to learn the best way of structuring the files and use coffeescript in combination with backbone and cake, I have created a small project on github to keep it as a reference for myself, maybe it will help you too around cake and some basic things. All compiled files are in www folder so that you can open them in your browser and all source files (except for cake configuration) are in src folder. In this example, all .coffee files are compiled and combined in one output .js file which is then included in html.