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
Encore
    // вы можете использовать этот метод, чтобы предоставить другие общие глобальные переменные
    // такие, как '_' для библиотеки 'underscore'
    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery'
    })
    // ...
;

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

1
window.$ = window.jQuery = require('jquery');

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