Is there a way to include file in coffee script? Is there a way to include file in coffee script? javascript javascript

Is there a way to include file in coffee script?


If you use coffeescript with node.js (e.g. when using the commandline tool coffee) then you can use node's require() function exactly as you would for a JS-file.

Say you want to include included-file.coffee in main.coffee:

In included-file.coffee: declare and export objects you want to export

someVar = ...exports.someVar = someVar

In main.coffee you can then say:

someVar = require('included-file.coffee').someVar

This gives you clean modularization and avoids namespace conflicts when including external code.


How about coffeescript-concat?

coffeescript-concat is a utility that preprocesses and concatenates CoffeeScript source files.

It makes it easy to keep your CoffeeScript code in separate units and still run them easily. You can keep your source logically separated without the frustration of putting it all together to run or embed in a web page. Additionally, coffeescript-concat will give you a single sourcefile that will easily compile to a single Javascript file.


Tl;DR: Browserify, possibly with a build tool like Grunt...

Solutions review

Build tool + import pre-processor

If what you want is a single JS file to be run in the browser, I recommend using a build tool like Grunt (or Gulp, or Cake, or Mimosa, or any other) to pre-process your Coffeescript, along with an include/require/import module that will concatenate included files into your compiled output, like one of these:

  • Browserify: probably the rising standard and my personal favourite, lets you to use Node's exports/require API in your code, then extracts and concatenates everything required into a browser includable file. Exists for Grunt, Gulp, Mimosa and probably most others . To this day I reckon it is probably the best solution if you're after compatibility both Node and the browser (and even otherwise)
  • Some Rails Sprocket-like solutions like grunt-sprockets-directives or gulp-include will also work in a consistent way with CSS pre-processors (though those generally have their own importing mechanisms)
  • Other solutions include grunt-includes or grunt-import

Standalone import pre-processor

If you'd rather avoid the extra-complexity of a build tool, you can use Browserify stand-alone, or alternatives not based on Node's require like coffeescript-concat or Coffee-Stir

[Not recommended] Asynchronous dynamic loading (AJAX + eval)

If you're writing exclusively for the browser and don't mind, or rather really want, your script being spread across several files fetched via AJAX, you can use a myriad of tools like:

  • yepnope.js or Modernizr's .load based on yepnope: Please note that yepnope is now deprecated by its maintainer, who recommend using build tools and concatenation instead of remote loading
  • RequireJS
  • HeadJS
  • jQuery's $.getScript
  • Vanilla AJAX + eval
  • your own implementation of AMD