使用 grunt-requirejs 优化 Require.js 后车把未加载答案

【问题标题】：Handlebars not loading after Require.js optimization with grunt-requirejs使用 grunt-requirejs 优化 Require.js 后车把未加载
【发布时间】：2014-07-24 09:32:10
【问题描述】：

我正在为我的应用程序使用 Yeoman Backbone 生成器。我想将 Handlebars 用于模板。当我包含一个 shim 时，它在 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 未定义（无法在未定义时调用 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 任务的输出，所以我知道 shim 是在 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' } } }

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

【问题讨论】：

标签： javascript requirejs gruntjs handlebars.js

【解决方案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 获取了垫片配置，所以一切都很好。希望这可以帮助人们摆脱同样的挫败感。

【讨论】：