Symfony 5 / Encore - Javascript проблема

Question

Я новичок с Symfony, и я только что закончил свой первый сайт. Созданный мной веб-сайт основан на Bootstrap, и я использую некоторые jquery для дополнительных js файлов, которые я сделал.

У меня возникли некоторые проблемы с Webpack и Encore, поскольку ни мой Bootstrap JS или jQuery работают. У меня нет проблем с моим S CSS и мои домашние js работают (за исключением того, что они не получают jQuery).

Что я сделал:

npm install --save-dev jquery
npm install --save-dev popper.js
npm install --save-dev bootstrap

В моем webpack.config. js (Encore) :

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

.addEntry('js/ad', './assets/js/ad.js')
.addStyleEntry('css/app', './assets/css/app.scss')

.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabelPresetEnv((config) => {
    config.useBuiltIns = 'usage';
    config.corejs = 3;
})
.enableSassLoader()

Я пробовал также с и без

.autoProvidejQuery()

В моем приложение. js

import $ from 'jquery';

global.$ = global.jQuery = $;

import 'bootstrap';

На моей базе. html .twig

<script src="{{ asset('build/js/app.js') }}"></script>

Когда все в порядке, я наконец-то работает в консоли

npm run dev

или

npm run build

После этого мои функции js не работают. На страницах, требующих jQuery, у меня ошибка в консоли.

Uncaught ReferenceError: jQuery is not defined
    at bootstrap-datepicker.min.js:7
    at bootstrap-datepicker.min.js:7
book:94 Uncaught ReferenceError: $ is not defined
    at book:94

Я немного растерялся и не знаю, что попробовать. Если я вручную добавлю свои js файлы без использования Encore, все будет нормально.

Заранее спасибо за помощь!

Answer 1

с обновлением на бис вам нужно импортировать css и jquery в ваш js, как это

//your css files
import '../css/yourCss.css';
//jquery just the $ sign 
const $ = require('jquery');

, тогда вам нужно сделать одну запись в файле конфигурации вашего веб-пакета, например

 //you have to make it one word like app, ad 

.addEntry('ad', './assets/js/ad.js')

для использования js и css в файлах веток, вам нужно добавить css с этой встроенной функцией вызова на бис без обычного тега ссылки, только эта строка

{{ encore_entry_link_tags('ad') }} // ad = the entry name

для использования java скрипта вам нужно использовать эту функцию

{{ encore_entry_script_tags('ad') }} // ad = the entry name

если вы используете vs код, я рекомендую использовать это расширение https://marketplace.visualstudio.com/items?itemName=nadim-vscode.symfony-extension-pack

с этим расширением вы просто набираете css в файле ветки, и расширение автоматически завершит функцию для вас