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

Posted 2023-02-16

【中文标题】Symfony 4 - Webpack-encore 使用 FosJsRouting ：路由未定义

【英文标题】：Symfony 4 - Webpack-encore use FosJsRouting : Routing is not defined

【发布时间】：2020-05-14 23:52:46

【问题描述】：

我尝试在我的 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);，我会在控制台中获取对象。

另一方面，无法在我的模板中使用它。

我有以下错误：

未捕获的引用错误：未定义路由

我不明白，因为我的其他包工作得很好，但不是路由

【参考方案1】：

您可能已经找到了解决方案，但这里有一些信息可供其他人参考：

文件是隔离的，这就是为什么在文件中通过 import/require 定义的变量在另一个文件或模板中未定义，即使您在模板中包含该文件。

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。

【讨论】：

这应该是实际捆绑包的文档。谢谢

【参考方案2】：

Globalise Routing variable 是在 javascript 中使用 webpack 安装的解决方案

在 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"));