Search code examples
javascriptcoffeescriptgulpbrowserifywatchify

Coffeeify won't parse more than the entry file


I'm quite a beginner with Browserify. I tried to integrate it into gulp.js with Watchify (for performance reasons) and Coffeeify. I tried at least five more or less different approaches I found in Google, the last of them being an official recipe from the gulp docs.

Problem now is the transforming part. I want to use Coffeeify to parse my code which is mostly written in CoffeeScript.

Coffeeify successfully parses my entry file app.coffee but when I require a ./foo.coffee from there, that file seems not to be transformed which will naturally result in a parsing error by Browserify about unexpected tokens etc.

Anyone got an idea how to fix that?

Here's the relevant part of my gulpfile, mostly the same as in the link above, just with added transformations.

var gulp = require( 'gulp' );
var gutil = require( 'gulp-util' );

var browserify = require( 'browserify' );
var watchify = require( 'watchify' );
var coffeeify = require( 'coffeeify' );
var source = require( 'vinyl-source-stream' );


var b = watchify( browserify({
    entries: [ './coffee/app.coffee' ],
    extensions: [ '.coffee' ],
    debug: true,
    cache: false,
    packageCache: false
}) );
b.transform( coffeeify ); // as described in the gulp docs

gulp.task( 'bundle', bundle );
b.on( 'update', bundle );
b.on( 'log', gutil.log );

function bundle() {
    return b.bundle()
        .on( 'error', gutil.log.bind( gutil, 'Browserify Error' ) )
        .pipe( source( 'bundle.js' ) )
        // I actually tried to pipe in coffeeify here (gulp-coffeeify as well), didn't help
        .pipe( gulp.dest( './js' ) );
};

Solution

  • Okay, this was totally my bad. I abstracted my code a bit too far for this post so the actual problem wasn't reflected here: app.coffee does not actually require ./foo.coffee directly but requires foo/foo from a node_modules directory, just to make things easier. Which was exactly the problem: Transforms will not apply to required packages. This is intended behavior.

    There seem to be two ways around that:

    Solution 1: A browserify option called global-transform. In the API it's used like b.transform( coffeeify, { global: true } ). This will apply the coffeeify transform to every required module.

    Solution 2: Package-wise definition of transforms. That means: Adding something like this to each modules' package.json:

    {
        "browserify": {
            "transform": ["coffeeify"]
        }
    }
    

    I decided to use the first one because my "packages" actually don't even have a package.json file, they're just in the node_modules directory to be easily accessible by browserify.