Using Ampersand with require.js

[mmacaula]

You've got an app written using AMD and require.js. You'd love to use ampersand and all its awesomeness. How do you do it?

I propose an example for those in my situation, using the solution I found useful. Basically I used browerify in my build process to process a simple proto file.

var underscoreMixin = require('ampersand-collection-underscore-mixin');
module.exports = {
    State : require('ampersand-state'),
    Registry : require('ampersand-registry'),
    View: require('ampersand-view'),
    Model: require('ampersand-model'),
    Collection : require('ampersand-rest-collection').extend(underscoreMixin)
};

I then run browserify in my gulp as a dependent task:

gulp.task('bundleAmpersand', function() {

    return gulp.src('./client/core/assets/js/libs/ampersand-proto.js')
        .pipe(plugins.browserify({
            debug : true,
            standalone : 'ampersand',
            external : ["jquery", "underscore"]
        }))
        .pipe(plugins.rename('ampersand-bundle.js'))
        .pipe(gulp.dest('./client/core/assets/js/libs'));
});

and config require.js to use ampersand in its config file:

requirejs.config({
  paths : {
// rest of config paths:
     ampersand : 'core/assets/js/libs/ampersand-bundle'
  },
  shim : {
       ampersand : ['lodash', 'jquery'],
  }
});

Then use happily:

// using nicer define vs the array type definition
define(function(require){

  var Ampersand = require('ampersand');
  var MyModel = Ampersand.Model.extend({
  /// model def
  });
  return MyModel;
});

Proposed example would flesh this out with a real project. But mostly with a heavy emphasis on the readme.md since everyone's require.js configuration is slightly different.

[fyockm]

@mmacaula sounds great! I'll be very interested to review the PR when you get a chance to submit one.

[fyockm]

Fulfilled by #5