![](/img/trans.png)
[英]How to use jQuery with webpack-encore in a Symfony project?
[英]Symfony 4 - Webpack-encore use FosJsRouting : Routing is not defined
我尝试在我的 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:未定义路由
我不明白,因为我的其他包工作得很好,但不是路由
您可能已经找到了解决方案,但以下是其他人的一些信息:
因此,在您的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
这不是一个合适的解决方案,因为它太冗余了,没有人愿意每次都复制相同的代码。
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 配置。
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 上查看本教程。
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"));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.