Question

我在我的应用程序中使用Yeoman Backbone生成器。我想使用Handlebars模板。当我包含一个垫片时，它在使用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'
  }
});

但是，当我尝试使用grunt build构建项目时，我在加载页面时遇到错误，即Handlebars未定义（无法在undefined上调用registerPartial）。当我排除Handlebars的垫片时，这与开发中的行为相同。

这就是Gruntfile中的requirejs任务：

// 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
        }
    }
},

此项目配置为使用grunt-requirejs执行Grunt任务。当使用Grunt运行任务时，这是requirejs任务的输出，所以我知道垫片在Gruntfile和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' } } }

还有什么我可能会遗失的吗？

Answer 1

显然我只需要在Gruntfile的构建配置中将wrapShim设置为true。

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
        }
    }
},

事实上，它从main.js获取了垫片配置，所以一切都很棒。希望这有助于某人处理同样的挫折。

在使用grunt-requirejs进行Require.js优化后，不会加载把手

1 个答案: