Organizing multiple CoffeeScript files

Question

I am working on an implementation of a web service where we are writing our front end code in CoffeeScript. The problem I have stumbled on is while the project is growing functionality has to be separated in different files. What I really need is a simple structure where in the utils.coffee file I will have the general functions which are required from every page and on each separate file I will have page_foo.coffee page_bar.coffee the specific functions. How can I structure it properly so I also make sure utils.coffee loads first and is accessible from everyone?

This isn't specific to CoffeeScript, but a general problem with JavaScript. That being said... see ["Structuring coffeescript code?"](http://stackoverflow.com/questions/6150455/structuring-coffeescript-code), and specifically my answer [here](http://stackoverflow.com/questions/6150455/structuring-coffeescript-code/8303780#8303780). — shesek, Jan 07 '12 at 12:49

score 7 · Answer 1 · answered Apr 26 '12 at 19:07

With CoffeeToaster you have the ability to include files that you'll need at the top of them, making sure your final ".js" file (that will be also a merge of all your CoffeeScript files) have everything in the proper order, for use inside the browser.

Take a look on the docs:
http://github.com/serpentem/coffee-toaster

It comes also with a packaging system that when enabled will use your folder's hierarchy as namespaces declarations to your classes if you want so, then you can extends classes from multiple files, do imports and son, such as like:

#<< another/package/myclass
class SomeClass extends another.package.MyClass

The build configuration is extremely minimalist:

# => SRC FOLDER
toast 'src_folder'
    # => VENDORS (optional)
    # vendors: ['vendors/x.js', 'vendors/y.js', ... ]

    # => OPTIONS (optional, default values listed)
    # bare: false
    # packaging: true
    # expose: ''
    # minify: false

    # => HTTPFOLDER (optional), RELEASE / DEBUG (required)
    httpfolder: 'js'
    release: 'www/js/app.js'
    debug: 'www/js/app-debug.js'

There's even a debug option that compile files individually for ease the debugging processes and another useful features.

How can I expose a complex namespace e.g. acme.sales.admin so that this is the root for my app? — Vic Goldfeld, Jul 11 '12 at 21:31
You create these folders one inside each other and put your files inside "acme/sales/admin/yourfile.coffee". — Anderson Arboleya, Oct 25 '12 at 17:11
CoffeeToaster has been [discontinued](https://github.com/arboleya/coffee-toaster/wiki) and forked to a new project, [Polvo](https://github.com/polvo/polvo). — Nathan Arthur, Jun 13 '17 at 20:13

score 5 · Answer 2 · answered Jan 09 '12 at 06:22

Execution order is respected on browsers, so just include utils.js first.

A tool like CodeKit(http://incident57.com/codekit/) can compile and minify+join all your .coffee files into one .js, that's easy to do with a shell script too.

If your app is really large, read up on require.js and Asynchoronous Module Loading. It will allow you to manage dependencies very easily and only load what's necessary:

# page_foo.coffee
define ['lib/utils'], ($) ->
    // code that uses 'utils'

Lipis · Accepted Answer · 2013-02-11T19:36:55.573

3

You could check how it's done in gae-init project (Disclaimer: I'm the creator).

The basic idea is that you have all the *.coffee files in one specific directory, and then a build script that compiles all the files and putting them in the correct paths.

Since you would like to be able to debug easily, while you're developing it, the build script should have an option to just compile them and another option to combine & minify them.

edited Feb 11 '13 at 19:36

answered May 02 '12 at 16:06

Lipis

21,388
20
94
121

Thanks I changed my answer only because of the awesomeness of it. It provides not only a performance optimized structure for coffee but a great stack of tools I commonly use. – topless May 02 '12 at 17:58
2

I didn't even know you could "unaccept" an answer :) You should look into CoffeeScript's own [cake](http://coffeescript.org/#cake) utility if you go that route (one less language in the stack then) – Ricardo Tomasi May 04 '12 at 06:57
This is a good idea, but it prevents you from having 2 files with the same name, like say views/navItem and models/navItem – dezman Jan 09 '14 at 17:09
@watson no it's not if you handle it correctly.. you should take into consideration the whole path and not only the filename.. – Lipis Jan 09 '14 at 17:53

score 2 · Answer 4 · answered Jan 11 '12 at 07:59

What I do is to write a Cake task to join and compile files in a predetermined sequence, for example

task 'build', 'join and compile *.coffee files', ->
  exec "coffee -j #{outJS}.js -c #{strFiles}", exerr

where outJS is the filename where I want the compiled JavaScript and strFiles is a string of filenames

Additionally you can add tasks to minify the compiled code using YUICompressor or your favorite tool. And during development watching, joining, compiling can also be automated

task 'watch', 'watch and compile changes in source dir', ->
  watch = exec "coffee -j #{outJS}.js -cw #{strFiles}"
  watch.stdout.on 'data', (data)-> process.stdout.write data

Have a look at this gist

Organizing multiple CoffeeScript files

4 Answers4