Получите переменную js, передаваемую Symfony4 Webpack Encore в пакете twig / FosJsRouting - PullRequest
Новая
       43

Получите переменную js, передаваемую Symfony4 Webpack Encore в пакете twig / FosJsRouting

0 голосов
/ 30 сентября 2018

Я использую пакет fos_js_routing на symfony4.Мне нужно, чтобы объект маршрутизации был доступен в моем виде ветки.Я определил маршрутизацию в assets / js / app.js, переносимом js-файле с Webpack Encore.Поскольку мой объект маршрутизации правильно встроен в этот файл, я хочу получить к нему доступ в виде ветки.

// assets/js/app.js
const routes = require('../../web/js/fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';

Routing.setRoutingData(routes);

Я получил эту строку в моей конфигурации веб-пакета: 

Encore      
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .cleanupOutputBeforeBuild()
  .enableSourceMaps(!Encore.isProduction())
  .addEntry('js/app', './assets/js/app.js')

Я получаю свое представление ветки, где транспилированный app.js доступен и успешно передается через веб-пакет Encore.Но переменная Маршрутизация недоступна (я получил ошибку клиента: Маршрутизация не определена), 

 // in my twig view, inside a script block
 var redirectionUrl = Routing.generate('my_route', {arg: arg}); // Routing is not defined

, вероятно, потому что она определена как let в процессе транспортировки, и я хочу ее как var , чтобы быть доступным в каждом представлении ветки, где я включаю транспилированный app.js (public / build / js / app.js).Мой вид Twig включает в себя переносимый файл в этой строке и успешно импортирован в мои источники веток 

<script src="{{ asset('build/js/app.js') }}"></script>

Как мне получить Routing в моем виде ветки с помощью Webpack encore?

1 Ответ

0 голосов
/ 05 января 2019

АВТО ОТВЕТ:

Насколько я понял (пожалуйста, прокомментируйте, если я не прав), потому что Webpack переносит ES6 синтаксис в ES5 синтаксис и потому, что в этом процессе все бесполезные и ненужные данные стираются в передаваемых вами производственных файлах js (при вызове команды: node_modules / .bin / encore production ).Насколько я знаю, вы не можете передавать неиспользуемые данные между файлом ES6 js, переданным в файл ES5 js с Encore .Возможно, входя в расширенную конфигурацию Webpack, но я не тратил время на это (а это обычно не то, что вы хотите иметь дело с транспиляторами).Мое использование fosjsrouting bundle в моем проекте не было необходимым, поэтому я просто удалил его.Но сегодня я объясню, как правильно загрузить fosjsrouting Routing object из ваших шаблонов веток (вместо того, чтобы пытаться получить к нему доступ из ваших js-файлов Encore).

1- Прочитайте документацию FosJsRouting Bundle здесь , чтобы:

--- A / Установить комплект

--- B / Постройте свои маршруты

Я не помню команд, но все хорошо объяснено в предоставленной ссылке документации.В конце установки вашего пакета вы должны получить:

1 - router.min.js файл в вашей папке public / => . /public / bundles / fosjsrouting / js / router.min.js

2 - fos_js_routes.json в вашей папке public / => ./public/js/fos_js_routes.json

Теперь я покажу вам, как сгенерировать маршрут на основе базового представления шаблона ветки. 

{% extends "base.html.twig" %}

{% block javascripts %}


    <script src="{{ asset('bundles/fosjsrouting/js/router.min.js')}}"> 
    </script>

    <script>

        var r = Routing; // loaded from router.min.js

        // because ES5 doesnt support require syntax, 
        // we use jquery getJSON function in order to set 
        // routing data to our Routing object
        $.getJSON("{{ asset('js/fos_js_routes.json')}}", function(routes) { 

            console.log(routes); 

            r.setRoutingData(routes);

            console.log(r.generate('my_route'));

        });

     </script>


{% endblock %}
...