Я впервые использовал symfony и в его последней версии, т. Е. 5 Мне удалось зашифровать несколько файлов, и все работает правильно. Тем не менее, при выборе файлов в поле FileType ничего не отображается (т.е. не отображается ни номер, ни имя выбранных файлов). Делая некоторые поиски в Интернете, я обнаружил, что должен сделать несколько javascripting для решения этой проблемы. Более того, поскольку я хочу добавить индикатор выполнения, 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>
активы /js/upload.js (скрипт страницы загрузки c)
$(document).ready(function() {
//bsCustomFileInput.init();
console.log('document ready');
alert('loaded');
})
После компиляции с
yarn encore dev
каталог public / build содержит загрузку . 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, нет предупреждений
Мне нужна помощь.