RequireJS 和 Webapp Yo 生成器上的“定义”未定义错误

Question

我苦苦挣扎了几天才弄明白，但今天我终于需要你的帮助了。
我的仓库：https://github.com/seoyoochan/bitsnut-web

---

我想要达到的目标：
- 加载和优化 r.js - 为 RequireJS 和 r.js 编写凉亭任务：
任务是：为 RequireJS 缩小、丑化和连接，并在生产环境中使用 r.js 进行优化
- 使用wiredep任务时如何排除index.html中的js脚本标签并通过RequireJS loader加载？

---

我使用 Yeoman 'Webapp' 生成器并生成了脚手架应用程序。

我通过bower install 安装了主干、木偶、文本、下划线等 我通过删除dependencies 修改了bower.json，并在dependencies 上只留下了"requirejs": "~2.1.16"。 （devDependencies 为空）

因为我使用[2][grunt-wiredep]，所以所有内容都会自动将bower_components 加载到index.html。 我修改了.bowerrc 以将依赖项存储在app/scripts/vendor。

但是，问题是我不知道如何通过 ReuqireJS 成功加载它们，而不是在 index.html 中将供应商作为脚本标签加载。 我必须为RequireJS和r.js编写一些任务，但不知道如何实现这个目标（我安装了grunt-contrib-requirejs）

我想按照第四种方法在https://github.com/jrburke/requirejs/wiki/Patterns-for-separating-config-from-the-main-module 使用r.js。但我遇到的问题是RequireJS的文档确实建议不要使用named module，而是anonymous module。 我想听听关于我应该如何处理的各种意见。

非常感谢您提前提供的帮助！

Answer 1

您手动加载脚本here 和here，使requireJS 的整个点无用。您还可以先加载main here config.js#L49。

相反，您应该只在 index.html 中有这一行

<script data-main="scripts/config" src="scripts/vendor/requirejs/require.js"></script>

并使用define() 和require() 在该文件中加载所有依赖项（就像使用main 一样）。由于您设置了 exports，它将值设置为全局变量，因此函数可以为空。这是一个示例：

define([
    "jquery",
    "underscore", 
    "backbone",
    "marionette",         
    "modernizr"
], function () {
        require([
        "backbone.babysitter", 
        "backbone.wreqr", 
        "text", 
        "semantic"
    ], function () {
        /* plugins ready */
    });

    define(["main"], function (App) {
           App.start();
    });
});

此外，baseUrl 与您的 data-main 属性文件夹 (http://requirejs.org/docs/api.html#jsfiles) 的目录相同：

RequireJS 加载所有与 baseUrl 相关的代码。 baseUrl 是 通常设置为与 data-main 中使用的脚本相同的目录 为页面加载的顶级脚本的属性。数据主要 属性是 require.js 将检查启动的特殊属性 脚本加载。

所以我认为config.js 中的baseUrl 指向不存在的scripts/scripts/-文件夹。它可以/应该是vendor/（并从所有声明中删除供应商部分）或留空。

您可以尝试使用https://github.com/yeoman/grunt-bower-requirejs 而不是wiredep，它与wiredep 执行类似的操作，但专门针对bower/requirejs 应用程序（请参阅：https://github.com/stephenplusplus/grunt-wiredep/issues/7）

您的 repo 不包含 jQuery 的 dist 文件夹，但除此之外，这里是 config.js 的工作示例：http://jsfiddle.net/petetnt/z6Levh6r/

模块定义应该是

require(["dependency1", "dependency2"])

并且模块应该返回自己。目前您的main 文件将自己设置为依赖项

require(["main", "backbone", "marionette"], function(App, Backbone, Marionette){

由于您已经使用exports 将backbone 和marionette 设置为全局变量，因此您可以再次将函数属性设置为空，因此您的主文件应如下所示：

require(["backbone", "marionette"], function(){
  "use strict";
  var App = new Backbone.Marionette.Application();

  App.addInitializer(function(){
    console.log("hello world!");
    Backbone.history.start();
  });

  return App;
});

由于您已经使用define 加载main，因此不要再次使用require。相反，只需在 define 函数内调用 App.start()。

https://jsfiddle.net/66brptd2/ (config.js)