FOSJsRoutingBundle与Symfony Flex的集成

时间:2019-01-04 12:36:48

标签: php symfony webpack fosjsroutingbundle

问题是我无法 FOSJsRoutingBundle Symfony Flex Webpack 一起使用。

我已经在Symfony 3中使用了很长时间了,从来没有问题,但是随着webpack的引入,设置变得更加复杂。不幸的是,版本2.2的文档不清楚。

您可以在此处找到该捆绑包的当前文档:https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index.html

如您所见,它为Symfony Flex建议采用以下方法,因此我在code/assets/js/fos_js_routes.js中编写了此方法:

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

Routing.setRoutingData(routes);


测试路径为code/assets/js/fos_routing_test.js

Routing.generate('test_route');


然后将其包含在webpack.config.js中:

.addEntry('app_fos_routing', [
    './assets/js/fos_js_router.js'
])
.addEntry('app_fos_generate_routes', [
    './assets/js/fos_routing_test.js'
])


和我的code/templates/index.html.twig

{{ encore_entry_script_tags('app_fos_routing') }}
{{ encore_entry_script_tags('app_fos_generate_routes') }}


但是,当我实现此webpack时,会创建以下内容,从而导致引用错误ReferenceError: Routing is not defined

/***/ "./assets/js/fos_js_router.js":
/*!************************************!*\
  !*** ./assets/js/fos_js_router.js ***!
  \************************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _vendor_friendsofsymfony_jsrouting_bundle_Resources_public_js_router_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js */ "./vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js");
/* harmony import */ var _vendor_friendsofsymfony_jsrouting_bundle_Resources_public_js_router_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_vendor_friendsofsymfony_jsrouting_bundle_Resources_public_js_router_js__WEBPACK_IMPORTED_MODULE_0__);
var routes = __webpack_require__(/*! ../../public/js/fos_js_routes.json */ "./public/js/fos_js_routes.json");


_vendor_friendsofsymfony_jsrouting_bundle_Resources_public_js_router_js__WEBPACK_IMPORTED_MODULE_0___default.a.setRoutingData(routes);

/***/ }),

2 个答案:

答案 0 :(得分:1)

我的Flex应用程序中存在相同的问题。这是我为使其工作而采取的步骤:

  1. 下载FOSJSRoutingBundle,并确保public/bundles/fosjsrouting/js/router.js中生成的文件看起来像this
  2. 使用命令fos:js-routing:dump --format=json --target=public/assets/js/fos_js_routes.json
  3. 生成路线
  4. 创建一个JS文件,您必须在其中使用生成的路由。

test.js:

  import Routing from '../../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
  const routes = require('../fos_js_routes.json'); //file with generated routes, created after executing the command above.
  Routing.setRoutingData(routes);
  Routing.generate('booking_data') //use generated route
  //... the rest of your JS code

确保这些相对路径正确。

  1. 将您的test.js添加到您的webpack.config.js文件中:

webpack:

const Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build')
    .setPublicPath('/build')
    .setManifestKeyPrefix('')
    .splitEntryChunks()
    .addEntry('js/test', './public/assets/js/test.js')// JAVASCRIPT
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .enableSassLoader()
    .enablePostCssLoader()
    .enableSingleRuntimeChunk()
;

module.exports = Encore.getWebpackConfig();
  1. test.js添加到您的模板

树枝:

{{ encore_entry_script_tags('js/test') }}

这就是我要做的一切。

答案 1 :(得分:0)

我建议将您的导入更改为

rng = pd.date_range('2017-04-03', periods=10)
df = pd.DataFrame({'Date': rng, 'id': [23] * 5 + [35] * 5})  
print (df)
        Date  id
0 2017-04-03  23
1 2017-04-04  23
2 2017-04-05  23
3 2017-04-06  23
4 2017-04-07  23
5 2017-04-08  35
6 2017-04-09  35
7 2017-04-10  35
8 2017-04-11  35
9 2017-04-12  35

df1 = df.groupby('id')['Date'].agg(['first','last']).reset_index()
print (df1)
   id      first       last
0  23 2017-04-03 2017-04-07
1  35 2017-04-08 2017-04-12