Question

我第一次使用symfony，最新版本为5 我设法编写了多个文件上传的代码，并且可以正常工作。但是，在选择文件时，“文件类型”字段中不会显示任何内容（即，所选文件的编号和名称均不会显示）。在网络上进行一些搜索后，我发现自己必须进行一些JavaScript处理才能解决此问题。此外，由于我要添加进度条，因此有必要使用javascript。问题是我无法管理页面上的JQuery和Javascript。

这就是我所做的。

webpack.config.js （删除大多数注释以缩短文件）

var Encore = require('@symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
.setOutputPath('public/build/')
.setPublicPath('/build')

.copyFiles({
    from: './assets/images',
})

/*
 * ENTRY CONFIG
 */
.addEntry('app', './assets/js/app.js')
.addEntry('upload', './assets/js/upload.js')
.splitEntryChunks()

.enableSingleRuntimeChunk()

/*
 * FEATURE CONFIG
 */
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())

.configureBabelPresetEnv((config) => {
    config.useBuiltIns = 'usage';
    config.corejs = 3;
 })
 // enables Sass/SCSS support
.enableSassLoader()

// uncomment if you're having problems with a jQuery plugin
.autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();

base.html.twig （主模板）

<!-- <!DOCTYPE html> -->
<html>
    <head>
        <meta charset="UTF-8" />
        <title>
          {% block title %}
             Welcome!
          {% endblock %}
       </title>

  {% block stylesheets %}
      {#       'app' must match the first argument to addEntry() in webpack.config.js #}
      {{ encore_entry_link_tags('app') }}
     {% endblock %}
  </head>

  <body>
    {% include 'topbar.html.twig' %}
    {% include 'banner.html.twig' %}
    {% include 'menubar.html.twig' %}
    {% include 'slogan.html.twig' %}
    {% include 'flashmessages.html.twig' %}

    <div class="container my-content">
       {% block body %} {% endblock %}
    </div>
    {% include 'footer.html.twig' %}
    {% block javascripts %} {% endblock %}

    </body>
</html>

assets / js / upload.js （特定于上传页面的脚本）

$(document).ready(function() {
    //bsCustomFileInput.init();
    console.log('document ready');
    alert('loaded');
})

编译后

yarn encore dev

public / build目录包含具有此内容的upload.js文件

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["upload"],{

/***/ "./assets/js/upload.js":
/*!*****************************!*\
  !*** ./assets/js/upload.js ***!
\*****************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

var $ = __webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js");

$(document).ready(function () {
  //bsCustomFileInput.init();
  console.log('document ready');
  alert('loaded');
});

/***/ })

},[["./assets/js/upload.js","runtime","vendors~app~upload"]]]);
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvanMvdXBsb2FkLmpzIl0sIm5hbWVzIjpbIiQiLCJyZXF1aXJlIiwiZG9jdW1lbnQiLCJyZWFkeSIsImNvbnNvbGUiLCJsb2ciLCJhbGVydGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLElBQU1BLENBQUMsR0FBR0MsbUJBQU8sQ0FBQyxvREFBRCxDQUFqQjs7QUFDQUQsQ0FBQyxDQUFDRSxRQUFELENBQUQsQ0FBWUMsS0FBWixDQUFrQixZQUFXO0FBQ3pCO0FBQ0FDLFNBQU8sQ0FBQ0MsR0FBUixDQUFZLGdCQUFaO0FBQ0FDLFFBQU0sQ0FBQyxRQUFELENBQU47QUFDSCxDQUpELEUiLCJmaWxlIjoidXBsb2FkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiY29uc3QgJCA9IHJlcXVpcmUoJ2pxdWVyeScpO1xuJChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24oKSB7XG4gICAgLy9ic0N1c3RvbUZpbGVJbnB1dC5pbml0KCk7XG4gICAgY29uc29sZS5sb2coJ2RvY3VtZW50IHJlYWR5Jyk7XG4gICAgYWxlcnRlKCdsb2FkZWQnKTtcbn0pIl0sInNvdXJjZVJvb3QiOiIifQ==

页面加载后，浏览器检查器将显示脚本

<script src="/build/upload.js><script>

但它无效。没有console.log，没有警报

我需要帮助。

Answer 1

在树枝模板中，您需要同时包含CSS和JS的Encore标签。

我看到您添加了{{ encore_entry_link_tags('app') }}

但是我看不到JS条目的标记

{{ encore_entry_script_tags('app') }}或{{ encore_entry_script_tags('upload') }}。

可能是因为它包含在您的footer.html.twig中，但是我们在这里看不到。

希望这会有所帮助！

编辑：自您找到答案以来，我认为我们可以通过深入了解如何查找隐藏的Javascript错误来解决此问题。

首先，尝试使用其他浏览器。过去，我的JS错误，在chrome控制台中看不到，但是在Firefox上却可以看到。

您始终可以尝试使用chrome的调试器，添加断点，然后逐步进行操作。 How do you launch the JavaScript debugger in Google Chrome?

或使用Firefox的 https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript

如果没有任何提示，则问题可能出在其他地方。

为什么我的Symfony Page特定脚本无法正常工作？

1 个答案: