问题描述
我为我的应用程序使用了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优化后，手柄不会加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！