javascript - 如何将 Requirejs-handlebars 与 Grunt-contrib-requirejs 优化器一起使用？

Question

我目前正在使用 Grunt-contrib-requirejs 优化器，因此我的最终包结构基本上如下所示:

Public/
  css
  js
   -myapp.js
   -require.js

我想使用 requirejs-handlebars 来呈现我的模板(也在服务器端使用 Express3-handlebars)。我已经让 NPM 包 requirejs-handlebars 正常工作，但前提是我使用以下行在我的快速服务器中公开该模块:

app.use('/node_modules/handlebars/dist/',  express.static(path.join(__dirname, './node_modules/handlebars/dist/' )));

如果没有此修复，我在加载我的应用程序时会收到以下控制台错误:

获取 http://localhost:3300/node_modules/handlebars/dist/handlebars.runtime.amd.js require.js:166 未捕获错误:脚本错误:handlebars.runtime

我猜这个错误是我的最终构建结构和我的 require 优化器的结果。出于显而易见的原因，该脚本不存在，因为我的最终构建结构不包含它。我想我想要的是不必使用 express 中间件包含 handlebars.runtime，或者将它与我最终的 myapp.js 合并(我不确定这样做的最佳方法是什么)。有任何想法吗？对于 n00bness 感到抱歉...任何建议将不胜感激!

谢谢!

我的 main.js 文件如下所示:

   require.config({
  shim: {
    jquery: {
      exports: '$'
    },
    underscore: {
      exports: '_'
    },
    backbone: {
      deps: [
        'jquery',
        'underscore'
      ],
      exports: 'Backbone'
    },
    marionette: {
      deps: [
        'jquery',
        'underscore',
        'backbone'
      ],
      exports: 'Marionette'
    },
    bootstrap: {
      deps: [
        'jquery'
      ]
    }
  },
  paths: {
    backbone: '../../bower_components/backbone/backbone',
    marionette: '../../bower_components/backbone.marionette/lib/backbone.marionette',
    jquery: '../../bower_components/jquery/jquery',
    underscore: '../../bower_components/underscore/underscore',
    requirejs: '../../bower_components/requirejs/require',
    text: '../../node_modules/requirejs-text/text',
    hb: '../../node_modules/requirejs-handlebars/hb',
    'handlebars.runtime': '../../node_modules/handlebars/dist/handlebars.runtime.amd',
  },
  packages: [
    {
      name: 'handlebars',
      location: '../../node_modules/handlebars/dist/amd',
      main: './handlebars'
    }
  ]
});


require([
  './app',
], function(App){

  'use strict';
  var myapp = new App();
  myapp.start();

});

我的 Grunt 文件:

     requirejs: {
          compile: {
            options: {
              baseUrl: "client/src",
              optimize: '', //uglify
              mainConfigFile:'client/src/main.js',
              name: "main",
              out: "build/app.js",
              removeCombined: true,
              logLevel: 0,
              findNestedDependencies: true,
              fileExclusionRegExp: /^\./,
              inlineText: true,
            }
          },
     },

Answer 1

grunt requirejs 似乎没有内联 handlebars.runtime 模块，这就是为什么您必须在 express 代码中为其添加远程路由。

我设法通过声明 handlebars 和 handlebars.runtime 的路径来修复它，我还必须填充它们。所以，我的 main.js 看起来是这样的:

paths: {
    'handlebars.runtime': '../bower_components/handlebars/handlebars.runtime',
    handlebars: '../bower_components/handlebars/handlebars',
    hbs: '../bower_components/requirejs-handlebars/hb',
},
shim: {
    'handlebars.runtime': {
        exports: 'handlebars.runtime'
    },
    handlebars: {
        deps: ['handlebars.runtime']
    },
}

现在，当我发出 grunt build 时，我可以看到 handlebars 和 handlebars.runtime 都内联到我的 app.js 中。这应该使您不必从 express 公开 node_modules 目录。