Javascript 获取twig/FosJsRouting捆绑包中Symfony4网页包Encore传输的js变量

我在symfony4上使用fos_js_路由包。我需要在我的细枝视图中获取可访问的路由对象。我在assets/js/app.js中定义了路由，这是一个带有网页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);

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

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

我得到了我的小枝视图，其中传输的app.js可以访问，并通过网页包Encore成功传输。但是变量路由不可访问（我得到客户端错误：路由未定义）

可能是因为在传输过程中被定义为let，我希望它是var，可以在包含传输app.js（public/build/js/app.js）的每个细枝视图中访问。我的Twig视图在这一行中包含传输的文件，并成功地导入到我的Twig源中

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

如何使用网页包encore在我的细枝视图中获取路由？

自动应答： 据我所知（如果我错了，请评论），因为Webpack正在将ES6语法传输到ES5语法，而且在这个过程中，所有无用和不可恢复的数据都会在您的js传输文件中被擦除 （调用命令时：node_modules/.bin/encore production）。因此，据我所知，您不能通过Encore在传输到ES5 js文件的ES6 js文件之间传递未使用的数据。可能是进入了网页包的高级配置，但我没有花时间（这通常不是你想要处理的transpilers）。我在项目中使用的fosjsrouting bundle不是必需的，所以我只是删除了它。但今天我将解释如何正确地从细枝模板加载fosjsrouting路由对象（而不是尝试从Encore transpiled js文件访问它）

---

1- 为了：

---A/安装捆绑包

---B/建立您的路线

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

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

2-fos\u js\u 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 %}

{%extends“base.html.twig”%}
{%block javascripts%}
var r=路由；//从router.min.js加载
//因为ES5不支持require语法，
//我们使用jquery getJSON函数来设置
//将数据路由到我们的路由对象
$.getJSON（{asset（'js/fos_js_routes.json'）}}），函数（routes）{
控制台日志（路由）；
r、 设置路由数据（路由）；
console.log（r.generate（'my_route'））；
});
{%endblock%}

要使其工作，路由必须具有默认导出。另外，在源代码中混合ESM和require语法也会让您头疼，我能尽快从您的答案中获得更多信息吗？（我尝试使用导入/导出ES6语法，但在我的小树枝模板中使用这些功能失败）感谢您的支持，我不想添加答案，因为没有足够的细节让我确定。我的意思是不要混合导入和require，确保

'../../vendor/friendsofsymfony/jsrouting bundle/Resources/public/js/router.min.js'

包含类似

exports.default=something

的内容，或者您使用的是支持ES模块互操作的加载程序或绑定程序，比如Webpack或SystemJS，或者是正确配置的诸如bable或TypeScriptor之类的transpiler您是否修复了此问题？我也有同样的问题

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