Requirejs, almond, backbone, handlebars

Question

Here's my situation, using Backbone and Handlebars with Requirejs.

I'm following CommonJS module definition style, because I find myself to be more comfortable with it:

define(function(require) {
  var Backbone = require('Backbone')
  var Item = require('model/item')
  // ...
})

And this is my requirejs config:

require.config({
  baseUrl: "/javascripts/",
  paths: {
    jquery: 'components/jquery/jquery',
    underscore: 'components/underscore/underscore',
    backbone: 'components/backbone/backbone',
    handlebars: 'components/handlebars/handlebars',
    text: 'components/text/text'
  },
  shim: {
    underscore: {
      exports: "_"
    },
    handlebars : {
        exports: "Handlebars"
    },
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
  }
});

Everything is running smooth before optimization, no problem occurs.

But, after optimization with r.js dependencies seem to break. I'd like to use Almond js in production, so here's my build file:

({
    baseUrl: ".",

    paths: {
        jquery: "components/jquery/jquery",
        underscore: "components/underscore/underscore",
        handlebars: "components/handlebars/handlebars",
        backbone: "components/backbone/backbone",
        text: "components/text/text"
    },

    // we use almond minimal amd module loader
    name: "components/almond/almond",

    // the application entry point
    include: ['app/init'],

    // we need to teel almond to require app/init
    insertRequire: ['app/init'],

    out: "main.js",

    cjsTranslate: true,

    wrap: true,

    optimize: "none"
})

Now, when I run the optimized javascript in browser, all I get are error messages, saying me that jQuery and Handlebars are undefined (neither Backbone.$ is, of course).

A simple workaround was to force jQuery loading, and assigning it to Backbone, like this:

var $ = require('jQuery')
var Backbone = require('Backbone')
Backbone.$ = $

But it sounds very silly and redundant to me. I feel like I'm doing something wrong but cannot figure out what.

After optimization Handlebars fail to load as dependency too. If I force its loading (as I did with jQuery), I get an error message during the build process, saying me that the module fs (a npm package) cannot be found.

I googled but found only this topic on Google groups (https://groups.google.com/forum/?fromgroups=#!topic/requirejs/lYwXS-3qjXg) that seems to be related to my problem, even if proposed solutions are not working at all.

Answer 1

I think you should add the Shim's config in your build file too.