'define' 未在 RequireJS 和 Webapp Yo 生成器上定义错误

Question

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

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

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

我通过 bower install 安装了 backbone、marionette、文本、下划线等我通过删除 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）

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

非常感谢您的提前帮助！

Answer 1

您手动加载脚本 here and here, rendering the whole point of requireJS useless. You also load main first 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 loads all code relative to a baseUrl. The baseUrl is normally set to the same directory as the script used in a data-main attribute for the top level script to load for a page. The data-main attribute is a special attribute that require.js will check to start script loading.

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

而不是 wiredep，您可以尝试使用 https://github.com/yeoman/grunt-bower-requirejs which does similar things to wiredep but specially for bower/requirejs apps (see: https://github.com/stephenplusplus/grunt-wiredep/issues/7)

您的存储库不包含 jQuery 的 dist 文件夹，但这里有一个 config.js 的工作示例：http://jsfiddle.net/petetnt/z6Levh6r/

至于模块定义，应该是

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

模块本身应该 return。当前，您的 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)

'define' 未在 RequireJS 和 Webapp Yo 生成器上定义错误

'define' is not defined error on RequireJS & Webapp Yo generator

javascript

backbone.js

gruntjs

yeoman

grunt-contrib-requirejs