获取由 Symfony4 Webpack Encore 在 twig / FosJsRouting bundle 中转译

Question

我在symfony4上使用fos_js_routing捆绑包。我需要在我的树枝视图中访问路由对象。我在assets/js/app.js中定义了路由，这是一个带有Webpack Encore的转译js文件。 因为我的路由对象是在此文件中正确构建的， 我想在 Twig 视图中访问它。

// 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);

我在我的 webpack 配置中得到了这一行：

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

我得到了我的树枝视图，其中转译的应用程序.js可以访问并成功由 webpack Encore 转译。但是无法访问变量路由(我收到客户端错误：未定义路由(，

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

可能是因为在转译过程中被定义为let，并且我希望它作为一个var，可以在我包含转译应用程序的每个 twig 视图中访问.js(公共/构建/js/app.js (。我的 Twig 视图在此行中包含转译的文件，并成功导入到我的 twig 源中

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

如何使用 Webpack encore 在我的树枝视图中获取路由？

Answer 1

自动答案：

据我了解(如果我错了，请发表评论(，因为Webpack正在将 ES6 语法转换为ES5语法，并且因为在此过程中，所有无用和无关的数据都会在您的生产 js 转译文件中被删除 (当您调用命令时：node_modules/.bin/安可制作(。所以据我所知，你不能在ES6 js文件之间传递未使用的数据，该文件转译为带有Encore的ES5 js文件。也许进入 Webpack 的高级配置，但我没有花时间这样做(这通常不是您想要处理的转译器(。我在项目中使用fosjsrouting 捆绑包并不是必需的，所以我只是删除了它。但是今天我将解释如何从您的树枝模板正确加载fosjsrouting 路由对象(而不是尝试从您的 Encore 转译的 js 文件访问它(。

---

1-在此处阅读FosJs路由捆绑包的文档 为了：

---A/安装捆绑包

---B/构建您的路线

我不记得这些命令，但是在提供的文档链接中对所有内容都有很好的解释。 在捆绑包安装结束时，您必须获得：

1 - router.min.jspublic/文件夹中的文件 => ./public/bundles/fosjsrouting/js/router.min.js

2 - 在您的 public/文件夹中fos_js_routes.json =>./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 %}