Symfony 4 - использование Webpack-encore FosJsRouting: маршрутизация не определена - PullRequest
Новая
       59

Symfony 4 - использование Webpack-encore FosJsRouting: маршрутизация не определена

0 голосов
/ 29 января 2020

Я пытаюсь использовать FosJsRouting с Webpack-бисом в моем проекте Symfony 4.

Я сделал:

1. 

composer require friendsofsymfony/jsrouting-bundle

2. 

php bin/console assets:install --symlink public

3. 

php bin/console fos:js-routing:dump --format=json --target=public/js/fos_js_routes.json

И в моем приложении . js: 

// FosJsRouting

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

Теперь, если в приложение. js Я делаю console.log(Routing); Я получаю объект в консоли.

С другой стороны, невозможно использовать его в моих шаблонах.

У меня есть следующая ошибка:

Uncaught ReferenceError: Маршрутизация не определена

Я не понимаю, потому что мои другие пакеты работают очень хорошо, но не Routing

1 Ответ

0 голосов
/ 24 марта 2020

Возможно, вы нашли решение, но вот некоторая информация для других:

  • Файлы изолированы, поэтому переменная, определенная из import / require в файле, не определена в другом или в ваших шаблонах, даже если вы включите файл в свой шаблон.

1. Импортируйте и настраивайте везде

Итак, внутри вашего app.js, куда вы импортируете Routing, его можно использовать только в этом файле c, и вы должны импортировать его там, где вы хотите. Но вам нужно устанавливать маршруты каждый раз:

приложение. js

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

console.log(Routing.generate("exposed_route_name")); // will prints in console /path/to/exposed_route

прочее. js

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

console.log(Routing.generate("another_exposed_route_name")); // will prints in console /path/to/another_exposed_route

Это неправильное решение, потому что оно слишком избыточно, и никто не хочет дублировать один и тот же код каждый раз.

2. Глобализация Routing переменная

Другое решение - установить Routing как global и обращаться к нему в файлах, включенных после:

app. js

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

// Setting Routing as global there
global.Routing = Routing;

console.log(Routing.generate("exposed_route_name")); // will prints in console /path/to/exposed_route

прочее. js

console.log(Routing.generate("another_exposed_route_name")); // will prints in console /path/to/another_exposed_route

шаблон. html .twig 

{{ encore_entry_script_tags('app') }}
{{ encore_entry_script_tags('other') }}

<script>
console.log(Routing.generate("a_third_exposed_route_name")); // will prints in console /path/to/third_exposed_route
</script>

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

3. Экспортируйте Routing в свой собственный модуль

И есть решение, для которого вы создаете «поддельный» модуль маршрутизации. В этом файле вы установите конфигурацию объекта маршрутизации и экспортируете ее:

маршрутизация. js

const routes = require("../../public/js/fos_js_routes");
const Routing = require("../../public/bundles/fosjsrouting/js/router"); // do not forget to dump your assets `symfony console assets:install --symlink public`

Routing.setRoutingData(routes);

module.exports = Routing;

и затем импортируйте ее в любой файл для использования it:

прочее. js

const Routing = import("./routing");
console.log(Routing.generate("another_exposed_route_name")); // will prints in console /path/to/another_exposed_route

Вам не нужно устанавливать routing.js в качестве записи веб-пакета или включать его в свои шаблоны. Однако я не знаю, как это сделать, если вы напишите свой javascript непосредственно в шаблонах веточек.

Надеюсь, вы найдете свое решение. Вы также можете проверить это руководство на SymfonyCasts.

...