jQuery и приложения наследования

Внутри Webpack, когда вам нужен модуль, он (обычно) не устанавливает глобальную переменную. Вместо этого, оно просто возвращает значение:

1
2
// загружает jquery, но *не* устанавливает глобальную переменную $ или jQuery
const $ = require('jquery');

На практике, это вызовет проблемы с некоторыми внешними библиотеками, которые полагаются на то, чтобы jQuery был глобальным. Это будет проблемой, если часть вашего JavaScript не обрабатывается через Webpack (например, у вас есть некоторый JavaScript в ваших шаблонах).

Использование библиотек, ожидающих, что jQuery будет глобальным

Некоторые приложения наследования JavaScript используют практики программирования, которые плохо совместимы с новыми практиками, рекламируемыми Webpack. Наиболее распространённой из этих проблем является использование кода (например, плагинов jQuery), которые предполагают, что jQuery уже доступен через глобальные переменные $ или jQuery. Если эти переменные не определены, то вы получите такие ошибки:

1
2
Uncaught ReferenceError: $ is not defined at [...]
Uncaught ReferenceError: jQuery is not defined at [...]

Вместо того, чтобы всё переписывать, Encore предоставляет вам другое решение. Благодаря методу autoProvidejQuery(), каждый раз, когда файл JavaScript использует переменные $ или jQuery, Webpack автоматически требует jquery и создаёт эти переменные для вас.

Итак, при работе с приложениями наследования, вам может понадобиться добавить к webpack.config.js следующее:

1
2
3
4
Encore
    // ...
+     .autoProvidejQuery()
;

Внутренне, этот метод 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 вне файлов JavaScript, обрабатываемых Webpack (например, JavaScript, который всё ещё живёт в ваших шаблонах), вам нужно вручную установить их как глобальные переменные в некотором файле JavaScript, который загружается до вашего кода наследования.

Например, вы можете определить файл common.js, который обрабатывается Webpack и загружается на каждой странице со следующи содержанием:

1
2
3
4
5
// потребовать jQuery нормально
const $ = require('jquery');

// создать глобальные переменные $ и jQuery
global.$ = global.jQuery = $;

Tip

Переменная global - это особый способ установки чего-либо в переменной window. В веб-контексте, использование global и window эквивалентны, только window.jQuery не будет работать при использовании autoProvidejQuery(). Другими словами, используйте global.

Эта документация является переводом официальной документации Symfony и предоставляется по свободной лицензии CC BY-SA 3.0.