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

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

提问by seoyoochan

I have struggled a few days to figure this out,, but finally I need your help today.
my repo: https://github.com/seoyoochan/bitsnut-web

我已经挣扎了几天才弄清楚这一点，但今天我终于需要你的帮助。
我的回购：https: //github.com/seoyoochan/bitsnut-web

---

---

what I want to achieve:
- Load and optimize r.js - Write bower tasks for RequireJS and r.js :
   tasks are: minify & uglify & concatenation for RequireJS, and optimise with r.js on production
- How to exclude js script tags in index.htmlwhen using wiredeptasks and load them through RequireJS loader?

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

---

---

I use Yeoman 'Webapp' generator and generated the scaffold app.

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

I installed backbone, marionette, text, underscore, and etc via bower installI modified bower.jsonby removing dependenciesand left only "requirejs": "~2.1.16"on dependencies. (devDependenciesis empty)

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

because I use [2][grunt-wiredep], everything is automatically loaded bower_componentsinto index.html. I modified .bowerrcto store dependencies at app/scripts/vendor.

因为我用[2][grunt-wiredep]，一切都会自动加载bower_components到index.html. 我修改.bowerrc为将依赖项存储在app/scripts/vendor.

However, the problem is that I don't know how to successfully load them through ReuqireJS and not to load the vendors as script tags inside index.html. I have to write some tasks for RequireJS and r.js, but don't know how to achieve this goal ( I installed grunt-contrib-requirejsthough )

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

I want to follow the 4th method to make use of r.jsat https://github.com/jrburke/requirejs/wiki/Patterns-for-separating-config-from-the-main-module. but the issue I encountered was that RequireJS's documentation does suggest to not use named module, but anonymous module. I would like to hear various opinions about how I should approach.

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

I really appreciate your help in advance!

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

回答by Pete TNT

You load your scripts manually hereand here, rendering the whole point of requireJSuseless. You also load mainfirst here config.js#L49.

您在此处和此处手动加载脚本，从而使整个点requireJS变得毫无用处。您还main首先在此处加载config.js#L49。

Instead, you should only have this line in your index.html

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

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

And load all your dependencies in that file (like you do with main) using define()and require(). As you have set exports, which sets the values as globals, the functions can be empty. Here's an sample:

并加载所有依赖于该文件（像你这样做main使用）define()和require()。正如您所设置的那样exports，将值设置为全局变量，函数可以为空。这是一个示例：

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

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

Also the baseUrlis the same as the directory as your data-mainattributes folder (http://requirejs.org/docs/api.html#jsfiles):

也与属性文件夹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.

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

So I think your baseUrlin config.jspoints to scripts/scripts/-folder which doesn't exist. It could/should be vendor/instead (and remove the vendor part from all of the declarations) or just left empty.

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

Instead of wiredep, you could try using https://github.com/yeoman/grunt-bower-requirejswhich does similar things to wiredepbut specially for bower/requirejsapps (see: https://github.com/stephenplusplus/grunt-wiredep/issues/7)

代替wiredep，您可以尝试使用https://github.com/yeoman/grunt-bower-requirejs，它与应用程序类似wiredep但专门用于bower/requirejs应用程序（请参阅：https: //github.com/stephenplusplus/grunt-wiredep/issues/ 7)

Your repo doens't include the dist-folder for jQuery, but otherwise here's a working sample of config.js: http://jsfiddle.net/petetnt/z6Levh6r/

你的回购不包括 dist 文件夹jQuery，但这里有一个工作示例config.js：http: //jsfiddle.net/petetnt/z6Levh6r/

As for the module-definition, it should be

至于模块定义，应该是

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

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

and the module should return itself. Currently your mainfile sets itself as a dependency

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

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

As you already set the backboneand marionetteas globals with exports, you can again set the function attributes empty, so your main file should look like this:

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

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

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

  return App;
});

And as you already use defineto load main, don't requireit again. Instead just call App.start()inside the definefunction.

并且您已经使用define了 load main，请不要require再使用它。而只是App.start()在define函数内部调用。

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

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