Ошибка «define» не определена в генераторе RequireJS и Webapp Yo

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


Чего я хочу достичь:
- Загрузить и оптимизировать r.js - Написать задачи Bower для RequireJS и r.js:
задачами являются: минимизация и сокращение и конкатенация для RequireJS и оптимизация с r.js на производстве
- Как исключить теги сценария js в index.html при использовании wiredep задач и загрузить их через загрузчик 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. Я хотел бы услышать различные мнения о том, как мне следует подходить.

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


person seoyoochan    schedule 28.03.2015    source источник
comment
@PeteTNT Я знаю, что не хочу, чтобы он был включен в index.html, но они были автоматически включены «wiredep». Как я мог это решить? А также, верны ли и main.js, и config.js?   -  person seoyoochan    schedule 28.03.2015


Ответы (1)


Вы загружаете свои скрипты вручную здесь и здесь, делая весь смысл requireJS бесполезным . Вы также сначала загружаете main здесь 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/-папку, которой не существует. Вместо этого он может/должен быть vendor/ (и удалить часть поставщика из всех объявлений) или просто оставить пустым.

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

В вашем репо нет папки 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)

person Pete TNT    schedule 28.03.2015
comment
Я очень ценю ваш подробный ответ! но у меня есть еще несколько проблем при загрузке файлов с помощью requireJS. если вы grunt serve мое приложение из репозитория, консоль жалуется на много вещей .. и как я могу позволить config.js ссылаться на main.js ? или пусть main.js относится к config.js? Я думал, что могу просто сказать require определенный файл модуля, установленный define() method, я ошибаюсь? - person seoyoochan; 28.03.2015
comment
@seoyoochan, я вытащил ваш обновленный репозиторий и немного изменил файл config.js: смотрите скрипку в конце страницы. Однако в репо не было папки /dist/ для jquery. Я не заметил, что вы (правильно) установили экспорт, поэтому вы можете/должны оставить атрибуты define и ready-functions пустыми. - person Pete TNT; 28.03.2015
comment
Спасибо! Сейчас это почти работает, но когда мне нужно [main] внутри config.js. он возвращает undefined. посмотрите на это s18.postimg.org/6dcw0l57t/, и я обновил репозиторий - person seoyoochan; 28.03.2015
comment
Посмотрите мое редактирование еще раз, оно исправляет некоторые проблемы с файлом Main. - person Pete TNT; 28.03.2015
comment
И некоторые условия гонок. Я думаю, что это все еще можно немного улучшить, но, наконец, оно работает :) - person Pete TNT; 28.03.2015
comment
Я не знаю, почему мой сервер продолжает говорить 'define' is not defined., потому что определение не было успешно определено, var App = new Backbone.Marionette.Application(); тоже не работает и выдает ошибку на консоли. :/ (обновленное репо) - person seoyoochan; 29.03.2015
comment
Проверьте вкладку «Сеть». Возможно, ваши серверы baseUrl отличаются от локальных! - person Pete TNT; 29.03.2015
comment
Давайте продолжим обсуждение в чате. - person seoyoochan; 29.03.2015
comment
Я войду в этот чат. - person seoyoochan; 29.03.2015