Symfony 4 / Webpack Encore: jQuery не работает
jQuery не работает, и я не могу использовать раскрывающийся список начальной загрузки, пользовательский javascript ...
После npm run dev (или npm run build) файл app.js хорошо создается и загружается в браузер.
Компиляция выполняется без ошибок.
Я попытался включить .autoProvidejQuery(), затем npm run dev / npm run build, но ничего не изменилось.
Я использую Symfony 4.1.6
Решение найдено
Измените .enableSingleRuntimeChunk () на .disableSingleRuntimeChunk () в webpack.config.js
Если вы просто прокомментируете строку, она работает, но при запуске npm run dev или npm run build появляется предупреждающее сообщение.
package.json
"devDependencies": {
"@symfony/webpack-encore": "^0.22.0",
"bootstrap": "^4.2.1",
"jquery": "^3.3.1",
"popper.js": "^1.14.6",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
},
"dependencies": {
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0"
}
webpack.config.js
var Encore = require('@symfony/webpack-encore');
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if you JavaScript imports CSS.
*/
.addEntry('js/app', './assets/js/app.js')
.addEntry('js/ad', './assets/js/ad.js')
.addStyleEntry('css/app', './assets/css/app.scss')
//.addStyleEntry('css/bootstrap', './assets/css/bootstrap.min.css')
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables Sass/SCSS support
.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
// uncomment if you use API Platform Admin (composer req api-admin)
//.enableReactPreset()
//.addEntry('admin', './assets/js/admin.js')
;
module.exports = Encore.getWebpackConfig();
app.js
const $ = require('jquery');
global.$ = global.jQuery = $;
require('bootstrap');
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>SymBNB - {% block title %}Bienvenue !{% endblock %}</title>
<meta name = "viewport" content = "width=device-width, user-scalable=no">
<link rel = "stylesheet" href = "{{ asset('build/css/app.css') }}">
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity = "sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin = "anonymous">
{# <link rel = "stylesheet" href = "/css/app.css"> #}
{% block stylesheets %}{% endblock %}
</head>
<body>
{% include 'partials/header.html.twig' %}
{% block body %}{% endblock %}
{% include 'partials/footer.html.twig' %}
{#<script src = "/js/jquery.min.js"></script>
<script src = "/js/popper.min.js"></script>
<script src = "/js/bootstrap.min.js"></script>#}
<script src = "{{ asset('build/js/app.js') }}"></script>
{% block javascripts %}{% endblock %}
</body>
</html>
Похожие темы:
Webpack Symfony Enore jquery плагины сторонних разработчиков
Нет, но я обнаружил: это происходит из .enableSingleRuntimeChunk () в webpack.config.js
вы пробовали менять .addEntry('js/app', './assets/js/app.js') на .addEntry('app', './assets/js/app.js')?
Первое сообщение редактируется решением
Ответы 2
Решение найдено
Измените .enableSingleRuntimeChunk () на .disableSingleRuntimeChunk () в webpack.config.js
Если вы просто прокомментируете строку, она работает, но при запуске npm run dev или npm run build появляется предупреждающее сообщение.
Я внимательно следил за документацией и не имел никаких проблем с jquery.
Ваша версия webpack-бис?
Последняя стабильная все.
Вы видите разницу между моими файлами и вашими?
Если у вас есть enableSingleRuntimeChunk() в вашем webpack.config.js, вам необходимо добавить <script src = "{{ asset('build/runtime.js') }}"></script> в ваш базовый шаблон.
Есть помощник Twig encore_entry_script_tags(), который справляется с этим автоматически.
После нескольких часов незнания, почему мое приложение не работает, я нашел ваш ответ, и он сработал. Спасибо!!
Показывает ли результат простой console.info в вашем app.js?