title: Requirejs, almond, backbone, handlebars
body: <p>Here's my situation, using Backbone and Handlebars with Requirejs.</p>
  
  <p>I'm following CommonJS module definition style, because I find myself to be more comfortable with it:</p>
  
  <pre><code>define(function(require) {
    var Backbone = require('Backbone')
    var Item = require('model/item')
    // ...
  })
  </code></pre>
  
  <p>And this is my requirejs config:</p>
  
  <pre><code>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'
      }
    }
  });
  </code></pre>
  
  <p>Everything is running smooth before optimization, no problem occurs.</p>
  
  <p>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:</p>
  
  <pre><code>({
      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"
  })
  </code></pre>
  
  <p>Now, when I run the optimized javascript in browser, all I get are error messages, saying me that jQuery and Handlebars are undefined (neither <code>Backbone.$</code> is, of course).</p>
  
  <p>A simple workaround was to force jQuery loading, and assigning it to Backbone, like this:</p>
  
  <pre><code>var $ = require('jQuery')
  var Backbone = require('Backbone')
  Backbone.$ = $
  </code></pre>
  
  <p>But it sounds very silly and redundant to me.
  I feel like I'm doing something wrong but cannot figure out what.</p>
  
  <p>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 <code>fs</code> (a npm package) cannot be found.</p>
  
  <p>I googled but found only this topic on Google groups (<a href="https://groups.google.com/forum/?fromgroups=#!topic/requirejs/lYwXS-3qjXg" rel="nofollow">https://groups.google.com/forum/?fromgroups=#!topic/requirejs/lYwXS-3qjXg</a>) that seems to be related to my problem, even if proposed solutions are not working at all.</p>