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

Question

我嘗試在我的 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：未定義路由

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

Answer 1

您可能已經找到了解決方案，但以下是其他人的一些信息：

• 這些文件是隔離的，這就是為什么從文件中的 import/require 定義的變量在另一個文件或模板中未定義的原因，即使您將文件包含在模板中。

1.隨處導入配置

因此，在您的app.js ，您導入Routing ，它只能在此特定文件中使用，並且您必須將其導入到您想要的任何位置。 但是，您每次都需要設置路線：

應用程序.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

其他.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設置為全局並在以下文件中訪問它：

應用程序.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

其他.js

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

模板.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

還有一個解決方案，您可以為其創建一個“假”路由模塊。 在此文件中，您將設置路由對象配置並將其導出：

路由.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;

然后將其導入任何文件以使用它：

其他.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 上查看本教程。

Answer 2

Globalize Routing 變量是在 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"));