jQuery і додатки наслідування

Дата оновлення перекладу 2022-11-02

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"