Symfony 4-Webpack-encore使用FosJsRouting:路由未定义

我在Symfony 4项目中尝试将FosJsRouting与Webpack-encore一起使用。

我做到了:

1。

composer require friendsofsymfony/jsrouting-bundle

2。

php bin/console assets:install --symlink public

3。

php bin/console fos:js-routing:dump --format=json --target=public/js/fos_js_routes.json

在我的 app.js 中:

// FosJsRouting

const routes = require('../../public/js/fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
Routing.setRoutingData(routes);

现在,如果在 app.js 中执行console.log(Routing);,则会在控制台中获得对象。

另一方面,不可能在我的模板中使用它。

我遇到以下错误:

未捕获的ReferenceError:未定义路由

我不明白,因为我的其他程序包工作得很好,但“路由”却不行

hoho1141 回答:Symfony 4-Webpack-encore使用FosJsRouting:路由未定义

您可能已经找到了解决方案,但以下是其他一些信息:

  • 文件是隔离的,这就是即使在模板中包含文件时,也无法在另一个文件或模板中定义从文件的导入/请求中定义的变量的原因。

1。随处导入和配置

因此,在您的app.js内部,您将在其中导入Routing,该文件只能在此特定文件中使用,并且必须将其导入到任何需要的位置。但是,您需要每次都设置路线:

app.js

const routes = require('../../public/js/fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
Routing.setRoutingData(routes);

console.log(Routing.generate("exposed_route_name")); // will prints in console /path/to/exposed_route

other.js

const routes = require('../../public/js/fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
Routing.setRoutingData(routes);

console.log(Routing.generate("another_exposed_route_name")); // will prints in console /path/to/another_exposed_route

这不是一个合适的解决方案,因为它太多余了,没有人希望每次都重复相同的代码。


2。全球化Routing变量

另一种解决方案是将Routing设置为 global 并访问以下文件中包含的文件:

app.js

const routes = require('../../public/js/fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
Routing.setRoutingData(routes);

// Setting Routing as global there
global.Routing = Routing;

console.log(Routing.generate("exposed_route_name")); // will prints in console /path/to/exposed_route

other.js

console.log(Routing.generate("another_exposed_route_name")); // will prints in console /path/to/another_exposed_route

template.html.twig

{{ encore_entry_script_tags('app') }}
{{ encore_entry_script_tags('other') }}

<script>
console.log(Routing.generate("a_third_exposed_route_name")); // will prints in console /path/to/third_exposed_route
</script>

问题是,包括全球化文件时,路由将在任何地方可用。它也将在您的Web控制台中可用,我认为这不是一件好事,因为每个人都可以看到您的所有fos_js_routing配置。


3。在您自己的模块中导出Routing

还有一种解决方案,您可以为其创建“伪”路由模块。在此文件中,您将设置路由对象配置并导出它:

routing.js

const routes = require("../../public/js/fos_js_routes");
const Routing = require("../../public/bundles/fosjsrouting/js/router"); // do not forget to dump your assets `symfony console assets:install --symlink public`

Routing.setRoutingData(routes);

module.exports = Routing;

然后将其导入任何要使用的文件中:

other.js

const Routing = import("./routing");
console.log(Routing.generate("another_exposed_route_name")); // will prints in console /path/to/another_exposed_route

您无需将routing.js设置为webpack条目,也无需将其包含在模板中。但是,如果您直接在树枝模板中编写javascript,我就不知道该怎么做。

希望您会找到解决方案。您也可以在SymfonyCasts上检查此tutorial

本文链接:https://www.f2er.com/2691572.html

大家都在问