FOSJsRoutingBundle integration with Symfony Flex

Question

问题是我无法让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);
/***/ }),

Answer 1

我在 Flex 应用程序中遇到了同样的问题。 以下是我为使其工作而采取的步骤：

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

测试.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

确保这些相对路径正确。

4. 将 test.js 添加到 webpack.config.js 文件中：

网络包：

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();

5. 将test.js添加到模板

树枝：

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

这就是我为使其工作所做的一切。

Answer 2

我建议将您的导入更改为

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