使用grunt-requirejs进行Require.js优化后，手柄不会加载 [英] Handlebars not loading after Require.js optimization with grunt-requirejs

问题描述

我为我的应用程序使用了Yeoman Backbone发生器。我想使用Handlebars模板。当我加入一个垫片时，它在 grunt serve 的开发中效果很好。

  // main.js 
 
 require.config（{
 shim：{
 bootstrap：{
 deps：['jquery']，
出口：'jquery'
}，
把手：{
出口：'把手'
} 
}，
路径：{
 jquery ：'../bower_components/jquery/dist/jquery'，
 backbone：'../bower_components/backbone/backbone'，
下划线：'../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：{
aseUrl：'.tmp / scripts'，
优化：'none'，
 paths：{
'templates'：'../../.tmp/scripts/templates'，
'jquery'：'../../ <％= yeoman.app％> / bower_components / jquery / dist / jquery'，
'underscore'：'../../<%= yeoman.app％> / bower_components / 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： 
 
 
 
 $ b $ p 
 
 
 
 
 $ b $ p $此项目已配置为Grunt任务使用grunt-requirejs。当使用Grunt运行任务时，这是 requirejs 任务的输出，所以我知道在Gruntfile和main.js中定义了填充程序。
  //用于requirejs任务的Grunt控制台输出
 $ b requirejs：
 {dist：
 {options：
 {baseUrl：'.tmp / scripts'，
优化：'none'，
路径：
 {templates：'../../.tmp/脚本/模板'，
 jquery：'../../app/bower_components/jquery/dist/jquery'，
下划线：'../../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'}}} 
  
还有其他的东西可能会丢失吗？$ b $显然，我只需要在Gruntfile的构建配置中将 wrapShim 设置为true。
 
  requirejs：{
 dist：{
 options：{
 baseUrl：'.tmp / scripts' ，
优化：'none'，
 paths：{$ b $'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 / bac kbone'，
'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 中找到了垫片配置，所以一切都很好。希望这可以帮助别人解决同样的挫折。
 
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?
解决方案
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.

                        
这篇关于使用grunt-requirejs进行Require.js优化后，手柄不会加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！