Handlebars not loading after Require.js optimizati

问题:

I'm using the Yeoman Backbone generator for my app. I wanted to use Handlebars for templates. When I include a shim, it works great in development with grunt serve.

// main.js

require.config({
  shim: {
    bootstrap: {
      deps: ['jquery'],
      exports: 'jquery'
    },
    handlebars: {
      exports: 'Handlebars'
    }
  },
  paths: {
    jquery: '../bower_components/jquery/dist/jquery',
    backbone: '../bower_components/backbone/backbone',
    underscore: '../bower_components/underscore/underscore',
    bootstrap: '../bower_components/sass-bootstrap/dist/js/bootstrap',
    handlebars: '../bower_components/handlebars/handlebars'
  }
});

However, when I'm trying to build the project with grunt build, I'm getting an error that Handlebars is undefined when I load the page (cannot call registerPartial on undefined). This is the same behavior in development when I exclude the shim for Handlebars.

This is what the requirejs task in the Gruntfile looks like:

// from Gruntfile.js

requirejs: {
    dist: {
        options: {
            baseUrl: '.tmp/scripts',
            optimize: 'none',
            paths: {
                'templates':  '../../.tmp/scripts/templates',
                'jquery':     '../../<%= yeoman.app %>/bower_components/jquery/dist/jquery',
                'underscore': '../../<%= yeoman.app %>/bower_components/underscore/underscore',
                'backbone':   '../../<%= yeoman.app %>/bower_components/backbone/backbone',
                'bootstrap':  '../../<%= yeoman.app %>/bower_components/sass-bootstrap/dist/js/bootstrap',
                'handlebars': '../../<%= yeoman.app %>/bower_components/handlebars/handlebars'
            },
            shim: {
                handlebars: {
                    exports: 'Handlebars'
                }
            },
            preserveLicenseComments: false,
            useStrict: true,
            wrap: true
        }
    }
},

This project is configured to use grunt-requirejs for the Grunt task. When the task is run with Grunt, this is the output for the requirejs task, so I know the shim is both defined in the Gruntfile and in main.js.

// Grunt console output for requirejs task

requirejs:
{ dist:
 { options:
    { baseUrl: '.tmp/scripts',
      optimize: 'none',
      paths:
       { templates: '../../.tmp/scripts/templates',
         jquery: '../../app/bower_components/jquery/dist/jquery',
         underscore: '../../app/bower_components/underscore/underscore',
         backbone: '../../app/bower_components/backbone/backbone',
         bootstrap: '../../app/bower_components/sass-bootstrap/dist/js/bootstrap',
         handlebars: '../../app/bower_components/handlebars/handlebars' },
      shim: { handlebars: { exports: 'Handlebars' } },
      preserveLicenseComments: false,
      useStrict: true,
      wrap: true,
      name: 'main',
      out: 'dist\\scripts\\main.js',
      mainConfigFile: '.tmp\\scripts\\main.js' } } }

Is there something else I could be missing?

回答1:

Apparently I only had to set wrapShim to true in the build configuration in Gruntfile.

requirejs: {
    dist: {
        options: {
            baseUrl: '.tmp/scripts',
            optimize: 'none',
            paths: {
                'templates':  '../../.tmp/scripts/templates',
                'jquery':     '../../<%= yeoman.app %>/bower_components/jquery/dist/jquery',
                'underscore': '../../<%= yeoman.app %>/bower_components/underscore/underscore',
                'backbone':   '../../<%= yeoman.app %>/bower_components/backbone/backbone',
                'bootstrap':  '../../<%= yeoman.app %>/bower_components/sass-bootstrap/dist/js/bootstrap',
                'handlebars': '../../<%= yeoman.app %>/bower_components/handlebars/handlebars'
            },
            preserveLicenseComments: false,
            useStrict: true,
            wrap: true,
            wrapShim: true
        }
    }
},

In fact, it picked up the shim configuration from main.js, so everything is great. Hopefully this helps someone out dealing with the same frustration.