0

我在 symfony4 上使用 fos_js_routing 包。我需要在我的树枝视图中获取路由对象。我在 assets/js/app.js 中定义了 Routing，这是一个使用 Webpack Encore 转译的 js 文件。因为我的 Routing 对象已正确构建在此文件中，所以我想在 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')

我得到了我的 twig 视图，其中转译的 app.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，在我包含已编译的 app.js （ public/build/js/app.js ）的每个 twig 视图中都可以访问。我的 Twig 视图包括这一行中的转译文件，并成功导入到我的 twig 源中

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

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

4

1 回答 1

1

自动应答 ：

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

1-在此处阅读 FosJsRouting Bundle 的文档， 以便：

--- A/安装包

--- B/建立你的路线

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

1 -您的public/文件夹中的router.min.js文件 => ./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 %}
于 2019-01-04T22:16:49.820 回答