«Определить» не определена ошибка на RequireJS & Webapp Генератор Yo

Question

Я изо всех сил пытался понять это, но, наконец, мне нужна ваша помощь сегодня.
мой репозиторий https://github.com/seoyoochan/bitsnut-web

---

, что я хочу достичь:
- Load и оптимизировать r.js - Запись задачи Бауэр для RequireJS и r.js:
    задачи: Минимизировать & uglify & Объединение для RequireJS и оптимизация с помощью r.js при создании
- Как исключить теги js script в index.html при использовании wiredep t спрашивает и загружает их через загрузчик RequireJS?

---

Я использую генератор Yeoman 'Webapp' и создал приложение для эшафотов.

Я установил позвоночник, марионетка, текст, подчеркивание, и т.д. с помощью bower install я модифицированного bower.json пути удаления dependencies и остался только "requirejs": "~2.1.16" на dependencies. (devDependencies пусто)

потому что я использую [2][grunt-wiredep], все автоматически загружается bower_components в index.html. Я модифицировал .bowerrc для хранения зависимостей на app/scripts/vendor.

Однако проблема заключается в том, что я не знаю, как успешно загрузить их через ReuqireJS, а не для загрузки поставщиков как теги скриптов внутри index.html. я должен написать некоторые задачи для RequireJS и r.js, но не знаю, как достичь этой цели (я установил grunt-contrib-requirejs хотя)

Я хочу следовать за 4-й способом, чтобы сделать использование r.js на https://github.com/jrburke/requirejs/wiki/Patterns-for-separating-config-from-the-main-module. но проблема, с которой я столкнулся, заключалась в том, что документация RequireJS предлагает не использовать named module, но anonymous module. Я хотел бы услышать различные мнения о том, как я должен подходить.

Я очень ценю вашу помощь заранее!

Answer 1

Вы загрузите ваши скрипты вручную here и here, отдавая всю точку requireJS бесполезно. Вы также загружаете mainhere config.js#L49.

Вместо этого, вы должны иметь только эту строку в index.html

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

И загрузить все зависимости в этом файле (как вы делаете с 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(); 
    }); 
}); 

Также baseUrl такая же, как в каталоге, data-main атрибуты папки (http://requirejs.org/docs/api.html#jsfiles):

RequireJS загружает весь код по отношению к BaseUrl. BaseUrl обычно устанавливается в тот же каталог, что и скрипт, используемый в атрибуте data-main для загрузки сценария верхнего уровня для страницы. Атрибут data-main - это специальный атрибут, который require.js будет проверять, чтобы запустить загрузку сценария .

Так что я думаю, что ваши baseUrl в config.js указывает на scripts/scripts/ -folder, который не существует. Это может быть/должно быть vendor/ вместо этого (и удалить часть поставщика из всех объявлений) или просто оставить пустым.

Вместо wiredep, вы можете попробовать использовать https://github.com/yeoman/grunt-bower-requirejs, который делает подобные вещи wiredep но специально для bower/requirejs приложений (см: https://github.com/stephenplusplus/grunt-wiredep/issues/7)

Ваши doens't репо включают DIST-папку для jQuery, но в остальном вот работающий образец config.js: http://jsfiddle.net/petetnt/z6Levh6r/

что касается определения модуля, он должен быть

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

и модуль должен вернуться сам. В настоящее время файл main устанавливает себя как зависимость

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

Как вы уже установили 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; 
}); 

И как вы уже используете define для загрузки main, не require его снова. Вместо этого просто позвоните App.start() в функцию define.

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