Как заставить работать r.js optimizer в связке Symfony2 и HearsayRequireJsBundle?

Question

[Макс]

Вопрос, непосредственно к тем, кто работал с данной связкой.
Используется Symfony2 и бандл HearsayRequireJsBundle. В нем документации по оптимизации скриптов с помощью r.js практически нет, кроме как добавления фильтра.

Единственное, что удалось нагуглиль, это вот это решение: labs.apt.no/how-i-got-the-hearsayrequirejsbundle-w...

Итак, проблема: при указании фильтра

{% javascripts
    filter='?requirejs'
    '@AcmeDemoBundle/Resources/public/js/src/main.js'
%}
    {{ require_js_initialize({ 'main' : asset_url }) }}
{% endjavascripts %}

и запуске команды дампа ассетов, проихсодит их оптимизация на основе конфига, и все подключаемые модули собираются в 1 файл. Так вот, даже по предложенному способу из вышеприведенной статьи, в dev окружении скрипты валятся с ошибкой.

Вопрос такой - есть ли конкретный пример удачного конфигурирования requirejs вместе с symfony?
Спасибо.

UPD:

Конфигурация:

hearsay_require_js:
    require_js_src: //cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js
    initialize_template: HearsayRequireJSBundle::initialize.html.twig
    base_url: js
    base_dir: %kernel.root_dir%/scripts
    optimizer:
        path: %kernel.root_dir%/../r.js
        declare_module_name: true
        hide_unoptimized_assets: false
        options:
            name: main
    paths:
        main: @TestCoreBundle/Resources/public/js/main

Вызов кода в шаблоне:

{% javascripts
            filter='?requirejs'
            '@TestCoreBundle/Resources/public/js/main.js'
        %}
        <script type='text/javascript'>
            var require = {
                deps: [],
                callback: function() {
                    require(['main'], function() {
                    });
                }
            };
        </script>
            {{ require_js_initialize({ 'main' : asset_url, 'configure' : false })}}
        {% endjavascripts %}

Файл main.js:

define([
], function(){
    alert(1)
});

Вот что происходит в dev окружении: срабатывает alert(1), после этого еще подгражется дополнительно файле /js/main.js - это и вызывает 404 ошибку.

Answer 1

[Сергей Протько]

Самый простой вариант - отказаться от Assetic как сборщика либо собирать через gulp/grunt. Assetic не лучший инструмент для сборки большого фронтэнда. Либо написать свои фильтры которые уже будут дергать что нужно.

в dev окружении скрипты валятся с ошибкой

ошибкой какого рода? По идее в dev окружении у вас не должен отрабатывать этот фильтр и должен подключаться require.js, нет?

Comments

[Макс]

Такой вариант существует, да. Но все же хочется найти решение с Assetic. Он используется и для других частей приложений, где отлично работает.

[Макс]

Проапдейтил тело вопроса, посмотрите обновление, пожалуйста. Что касается фильтров - в этом бандле же и используется свой фильтр. Он по идее все и делает необходимое, да только сконфигурировать все правильно не получается.

В dev окружении данный фильтр не отрабатывает, это верно. Смотрите апдейт вопроса.

Answer 2

[DroniC]

Сделайте такую настройку

optimizer:
        path: %kernel.root_dir%/../r.js
        hide_unoptimized_assets: true
        options:
            name: main

И в основном js-файле сделайте так

define("main",
           [], function(){
               alert(1)
});
require(['main']);

Работает замечательно для prod, а вот для dev нужно в config_dev.yml прописать следующее

hearsay_require_js:
   optimizer:
        hide_unoptimized_assets: false

Даже если этот параметр будет true, он почему то в dev режиме все равно не оптимизирует файлы, а просто заливает главный файл не сжатый, что в свою очередь вызывает ошибку об отсутствие файлов, которые прописаны при define. Может, если кто разберется почему, подскажите тогда.

Answer 3

[Quber]

Ну что разобрались в работе? можете скинуть решение?

Comments

[keltanas]

Пример из оф. документации вполне рабочий https://github.com/hearsayit/HearsayRequireJSBundl...