Is there a way to include file in coffee script?

Question

I'd like to know if there is a way to include a file in a coffee script. Something like #include in C or require in PHP...

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

You can try this library I made to solve this same problem coffee-stir its very simple. Just type #include and the name of the file that you want to include

#include MyBaseClass.coffee

For details http://beastjavascript.github.io/Coffee-Stir/

Answer 5

I found that using "gulp-concat" to merge my coffee scripts before processing them did the trick. It can be easily installed to your project with npm.

npm install gulp-concat

Then edit your gulpfile.js:

var gulp = require('gulp')
,coffee = require('gulp-coffee')
,concat = require('gulp-concat');

gulp.task('coffee', function(){
  gulp.src('src/*.coffee')
    .pipe(concat('app.coffee')
    .pipe(coffee({bare: true}).on('error', gulp.log))
    .pipe(gulp.dest('build/')
})

This is the code I used to concatenate all my coffee scripts before gulp processed it into the final build Javascript. The only issue is the files are processed in alphabetical order. You can explicitly state which file to process to achieve your own file order, but you lose the flexibility of adding dynamic .coffee files.

gulp.src(['src/file3.coffee', 'src/file1.coffee', 'src/file2.coffee'])
  .pipe(concat('app.coffee'))
  .pipe(coffee({bare: true}).on('error', gulp.log))
  .pipe(gulp.dest('build/')

gulp-concat as of February 25th, 2015 is available at this url.

Answer 6

Rails uses sprockets to do this, and this syntax has been adapted to https://www.npmjs.org/package/grunt-sprockets-directives. Works well for me.