Webpack FOSJsRoutingBundle 与 Symfony Flex 和 Angular 的集成
Webpack FOSJsRoutingBundle integration with Symfony Flex and Angular
我无法让 FOSJsRoutingBundle 与 Symfony Flex、Webpack 和 [=73= 一起工作]JS.
我在带有 AngularJS 的 Symfony 3 中使用这个包已经很长时间了,从来没有出现过问题,但是随着在 Symfony Flex 中引入 webpack,设置变得更加复杂。不幸的是,FOSJsRoutingBundle 2.2 版的文档不清楚。
您可以找到此包的当前文档 here。
我正在使用 FOSJsRoutingBundle 以便我的 Angular HTTP 请求可以使用生成的路由而不是绝对 URL。
问题
我已经按照 composer 的说明设置了这个包。然后将路由转储到位于 code/assets/fos_js_routes.json
的 json 文件中。此文件中生成的路由是有效的,也是我希望看到的。
因为我正在使用 Angular,所以我想在单独的文件中进行路由的初始要求声明,以便我所有的 Angular 控制器都可以使用 Routing.
而无需在这些文件中做任何进一步的工作。
FOS 安装文件 /code/assets/js/fos_js_router.js
(Following documentation)
const routes = require('../../assets/fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
Routing.setRoutingData(routes);
样本Angular文件/code/assets/js/apps/default/controller/test.js
(function () {
'use strict';
angular.module('test')
.controller(
'TestCtrl',
['$scope', '$http',
function ($scope, $http) {
let url = Routing.generate('test_route_name');
}
])
});
Webpack 配置
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.addEntry('app_fos_router', [
'./assets/js/fos_js_router.js'
])
.addEntry('app_angular', [
'./assets/js/apps/default/app.js', // angular app setup
'./assets/js/apps/default/routes.js', // angular routes setup
'./assets/js/apps/default/controller/test.js' // angular where Routing is needed
])
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
;
module.exports = Encore.getWebpackConfig();
前端树枝模板
{% extends 'base.html.twig' %}
{% block title %}Test{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{{ encore_entry_script_tags('app_fos_router') }}
{{ encore_entry_script_tags('app_angular') }}
{% endblock %}
{% block body %}
<div ng-app="test" ui-view="content"></div>
{% endblock %}
错误
从上面的设置中,我在 AngularJS 文件中得到 test.js: ReferenceError: Routing is not defined at
。
我需要做哪些不同的事情才能在我的 AngularJS 文件中使用 let url = Routing.generate('test_route_name');
?
在您的 assets/js
目录中创建文件 router.js
。接下来,填写 router.js
内容如下:
const routes = require('./fos_js_routes.json');
const router = require('../../vendor/friendsofsymfony/jsroutingbundle/Resources/public/js/router.min.js');
router.setRoutingData(routes);
module.exports = router;
像这样在 webpack.config.js
中提供新变量:
.autoProvideVariables({
"Routing": "router",
})
向您的 webpack 添加新加载器:
.addLoader({
test: /jsrouting-bundle\/Resources\/public\/js\/router.min.js$/,
loader: "exports-loader?router=window.Routing"
})
最后扩展 webpack 配置:
let config = Encore.getWebpackConfig();
config.resolve.alias = {
'router': __dirname + '/assets/js/router.js',
};
module.exports = config;
它应该使 Routing 成为一个全局对象,这样您就可以像这样在其他 js 文件中使用它:
let url = Routing.generate('some_route_name', { param: value });
希望对您有所帮助。干杯。
实现此功能的简单修复:
const routes = require('../../assets/fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
Routing.setRoutingData(routes);
window.Routing = Routing;
我无法让 FOSJsRoutingBundle 与 Symfony Flex、Webpack 和 [=73= 一起工作]JS.
我在带有 AngularJS 的 Symfony 3 中使用这个包已经很长时间了,从来没有出现过问题,但是随着在 Symfony Flex 中引入 webpack,设置变得更加复杂。不幸的是,FOSJsRoutingBundle 2.2 版的文档不清楚。
您可以找到此包的当前文档 here。
我正在使用 FOSJsRoutingBundle 以便我的 Angular HTTP 请求可以使用生成的路由而不是绝对 URL。
问题
我已经按照 composer 的说明设置了这个包。然后将路由转储到位于 code/assets/fos_js_routes.json
的 json 文件中。此文件中生成的路由是有效的,也是我希望看到的。
因为我正在使用 Angular,所以我想在单独的文件中进行路由的初始要求声明,以便我所有的 Angular 控制器都可以使用 Routing.
而无需在这些文件中做任何进一步的工作。
FOS 安装文件 /code/assets/js/fos_js_router.js
(Following documentation)
const routes = require('../../assets/fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
Routing.setRoutingData(routes);
样本Angular文件/code/assets/js/apps/default/controller/test.js
(function () {
'use strict';
angular.module('test')
.controller(
'TestCtrl',
['$scope', '$http',
function ($scope, $http) {
let url = Routing.generate('test_route_name');
}
])
});
Webpack 配置
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.addEntry('app_fos_router', [
'./assets/js/fos_js_router.js'
])
.addEntry('app_angular', [
'./assets/js/apps/default/app.js', // angular app setup
'./assets/js/apps/default/routes.js', // angular routes setup
'./assets/js/apps/default/controller/test.js' // angular where Routing is needed
])
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
;
module.exports = Encore.getWebpackConfig();
前端树枝模板
{% extends 'base.html.twig' %}
{% block title %}Test{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{{ encore_entry_script_tags('app_fos_router') }}
{{ encore_entry_script_tags('app_angular') }}
{% endblock %}
{% block body %}
<div ng-app="test" ui-view="content"></div>
{% endblock %}
错误
从上面的设置中,我在 AngularJS 文件中得到 test.js: ReferenceError: Routing is not defined at
。
我需要做哪些不同的事情才能在我的 AngularJS 文件中使用 let url = Routing.generate('test_route_name');
?
在您的 assets/js
目录中创建文件 router.js
。接下来,填写 router.js
内容如下:
const routes = require('./fos_js_routes.json');
const router = require('../../vendor/friendsofsymfony/jsroutingbundle/Resources/public/js/router.min.js');
router.setRoutingData(routes);
module.exports = router;
像这样在 webpack.config.js
中提供新变量:
.autoProvideVariables({
"Routing": "router",
})
向您的 webpack 添加新加载器:
.addLoader({
test: /jsrouting-bundle\/Resources\/public\/js\/router.min.js$/,
loader: "exports-loader?router=window.Routing"
})
最后扩展 webpack 配置:
let config = Encore.getWebpackConfig();
config.resolve.alias = {
'router': __dirname + '/assets/js/router.js',
};
module.exports = config;
它应该使 Routing 成为一个全局对象,这样您就可以像这样在其他 js 文件中使用它:
let url = Routing.generate('some_route_name', { param: value });
希望对您有所帮助。干杯。
实现此功能的简单修复:
const routes = require('../../assets/fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
Routing.setRoutingData(routes);
window.Routing = Routing;