在RequireJS&上未定义'define'错误Webapp Yo发电机 [英] 'define' is not defined error on RequireJS & Webapp Yo generator

问题描述

我已经花了几天的时间来解决这个问题，但是最后我今天需要您的帮助.
我的仓库: https://github.com/seoyoochan/bitsnut-web

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

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

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.html when using wiredep tasks and load them through RequireJS loader?

我使用Yeoman'Webapp'生成器并生成了脚手架应用.

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

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

I installed backbone, marionette, text, underscore, and etc via bower install I modified bower.json by removing dependencies and left only "requirejs": "~2.1.16" on dependencies. (devDependencies is empty)

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

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

但是，问题是我不知道如何通过ReuqireJS成功加载它们，并且不知道如何将供应商作为脚本标签加载到index.html中. 我必须为RequireJS和r.js编写一些任务，但不知道如何实现此目标(尽管我安装了grunt-contrib-requirejs)

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-requirejs though )

我想遵循r.js的第4种方法-module"rel =" nofollow> https://github.com/jrburke/requirejs/wiki/Patterns-for-separating-config-from-the-main-module .但是我遇到的问题是RequireJS的文档确实建议不要使用named module，而是使用anonymous module. 我想听听有关如何应对的各种意见.

I want to follow the 4th method to make use of r.js at 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.

非常感谢您的提前帮助！

I really appreciate your help in advance!

推荐答案

您手动加载脚本此处配置中加载main. js#L49 .

You load your scripts manually here and here, rendering the whole point of requireJS useless. You also load main first here config.js#L49.

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

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

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

并使用define()和require()将所有依赖项加载到该文件中(就像使用main一样).设置exports(将值设置为全局值)后，这些函数可以为空.这是一个示例:

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:

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#js文件):

Also the baseUrl is the same as the directory as your data-main attributes folder (http://requirejs.org/docs/api.html#jsfiles):

RequireJS加载相对于baseUrl的所有代码. baseUrl是 通常设置为与数据主服务器中使用的脚本相同的目录 顶级脚本以加载页面的属性.数据主体 该属性是require.js将检查以启动的特殊属性 脚本加载.

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/文件夹.可以/应该改为vendor/(并从所有声明中删除供应商部件)或留为空白.

So I think your baseUrl in config.js points 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.

您可以尝试使用 https://github.com/yeoman/grunt-bower-requirejs ，其功能与wiredep类似，但专门用于bower/requirejs应用程序(请参阅:

Instead of wiredep, you could try using 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的工作示例:

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/

对于模块定义，应该为

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

，模块应自行返回.当前，您的main文件将自身设置为依赖项

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

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

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

As you already set the backbone and marionette as globals with exports, you can again set the function attributes empty, so your main file should look like this:

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().

And as you already use define to load main, don't require it again. Instead just call App.start() inside the define function.

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

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

这篇关于在RequireJS&上未定义'define'错误Webapp Yo发电机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！