在 twig / FosJsRouting 包中获取由 Symfony4 Webpack Encore 转译的 js 变量

Question

我在 symfony4 上使用 fos_js_routing 包。我需要在我的树枝视图中获取 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')

我得到了我的树枝视图，其中转译的 app.js 可以访问并由 webpack Encore 成功转译。但是变量 Routing 不可访问（我收到客户端错误：Routing is not defined），

 // 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 在我的树枝视图中获取路由？

Answer 1

自动回答：

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

1- Read documentation of FosJsRouting Bundle here 为了 :

--- A/ 安装包

--- B/ 构建你的路线

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

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

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

在 twig / FosJsRouting 包中获取由 Symfony4 Webpack Encore 转译的 js 变量

Get js variable transpiled by Symfony4 Webpack Encore in twig / FosJsRouting bundle

javascript

twig

webpack-encore

symfony4

fosjsroutingbundle

自动回答：