Question

我在symfony4上使用fos_js_routing捆绑包。我需要在树枝视图中到达“路由”对象。我在Assets / js / app.js中定义了路由，这是Webpack Encore转换后的js文件。由于我的路由对象已正确构建在此文件中，我想在“树枝”视图中访问它。

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

我看到了树枝视图，在该视图中，可以通过webpack Encore访问并成功转换了已编译的app.js。但是变量“路由”不可达（我收到客户端错误：“路由”未定义），

 // 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源文件中

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

如何使用Webpack encore在Twig视图中获得“路由”？

Answer 1

自动答案：

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

1- Read documentation of FosJsRouting Bundle here 为了：

--- 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 %}

获取由Symfony4 Webpack Encore在树枝/ FosJsRouting捆绑包中转译的js变量

1 个答案:

自动答案：