jQuery і додатки наслідування
Дата оновлення перекладу 2024-05-27
jQuery і додатки наслідування
Всередині Webpack, коли вам потрібен модуль, він (зазвичай) не встановлює глобальну змінну. Замість цього, він просто повертає значення:
1 2
// завантажує jquery, але *не* встановлює глобальну змінну $ або jQuery
const $ = require('jquery');
На практиці, це викличе проблеми з деякими зовнішніми бібліотеками, які покладаються на те, щоб jQuery був глобальним. Це буде проблемою, якщо частина вашого JavaScript не обробляється через Webpack (наприклад, у вас є деякий JavaScript у ваших шаблонах).
1 2
Uncaught ReferenceError: $ is not defined at [...]
Uncaught ReferenceError: jQuery is not defined at [...]
Вирішення проблеми залежить від того, який код її викликає.
Виправлення плагінів jQuery, які очікують, щоб jQuery був глобальним
Плагіни jQuery часто очікують, що jQuery вже буде доступний через глобальні змінні
$
або jQuery
. Щоб виправити це, викличте autoProvidejQuery()
з вашого
файлу webpack.config.js
:
1 2 3 4 5
// webpack.config.js
Encore
// ...
+ .autoProvidejQuery()
;
Після перезапуску Encore, Webpack шукатиме всі неініціалізовані змінні $
і jQuery
,
і автоматично вимагати jquery
, а також встановлювати ці змінні для вас.
Він "перезаписує" "поганий" код, щоб він був правильним.
Внутрішньо, цей метод autoProvidejQuery()
викликає метод autoProvideVariables()
з Encore. На практиці, це еквівалентно наступному:
1 2 3 4 5 6 7 8 9 10
Encore
// ви можете використати цей метод, щоб надати інші загальні голбальні змінні
// такі як '_' для бібліотеки 'underscore'
.autoProvideVariables({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
})
// ...
;
Отримання доступу до jQuery поза файлами Webpack JavaScript
Якщо вашому коду також потрібний доступ до $
і jQuery
, а ви знаходитеся у
файлі, що обробляється Webpack/Encore, ви повинні прибрати всі помилки "$ не визначено",
вимагаючи у jQuery наступне: var $ = require('jquery')
.
Але якщо вам також потрібно надати доступ до змінних $
і jQuery
поза файлів
JavaScript, що обробляються Webpack (наприклад, JavaScript, який все ще живе у ваших
шабонах), вам потрібно вручну встановити їх як глобальні змінні в якомусь файлі
JavaScript, який завантажується до вашого успадкованого кода.
Наприклад, у вашому файлі app.js
, який обробляється Webpack, і завантажується на
кожній сторінці, додайте:
1 2 3 4 5 6 7
// app.js
// вимагайте jQuery нормально
const $ = require('jquery');
+ // створіть глобальні змінні $ і jQuery
+ global.$ = global.jQuery = $;
Змінна global
- це особливий спосіб установки речей у змінній window
. У веб-
контексті, використання global
і window
рівноцінні, окрім того, що
window.jQuery
не працюватиме при використанні autoProvidejQuery()
. Іншими
словами, використовуйте global
.
Крім того, не забудьте встановити опцію script_attributes.defer
як false
у вашому файлі webpack_encore.yaml
:
1 2 3 4 5
# config/packages/webpack_encore.yaml
webpack_encore:
# ...
script_attributes:
defer: false
Це гарантує, що атрибуту defer
у вашому тезі script
не буде.
Щоб дізнатися більше, див. Переміщення <script> всередині <head> та атриубту "defer"