Веб-пакет Symfony Encore JQuery сторонних плагинов

Question

У меня возникла проблема с реализацией сторонних плагинов jquery в symfony webpack encore. до сих пор у меня есть несколько файлов .js с различной логикой, а также некоторые скрипты внутри файлов веток, которые выполняют некоторые из js.

это app.js:

var $ = require('jquery');
global.$ = global.jQuery = global.jquery = $;
require('jquery-validation');

Webpack компилируется, но когда я запускаю программу, я получаю:

$ (...). Validate не является функцией

webpack.config.js прост:

var Encore = require('@symfony/webpack-encore');

Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
.setManifestKeyPrefix('build/')

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

.splitEntryChunks()
.enableSingleRuntimeChunk()
;
module.exports = Encore.getWebpackConfig();

package.json:

"jquery": "^3.3.1",
"jquery-validation": "^1.18.0",
"jquery-datetimepicker": "^2.5.20",

обновление: jquery-datetimepicker работает нормально, но JQuery-проверка не является!

Answer 1

решение: обновите webpack.config.js информацией о псевдонимах, чтобы каждый плагин jquery третьей стороны использовал один и тот же jquery

var path = require('path');

Encore
    .addAliases({
        'jquery': path.join(__dirname, 'node_modules/jquery/src/jquery')
    })

Answer 2

из: https://symfony.com/doc/current/frontend/encore/legacy-apps.html

Плагины jQuery и устаревшие приложения

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

// this loads jquery, but does *not* set a global $ or jQuery variable
const $ = require('jquery');

...

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

Подключаемые модули jQuery часто ожидают, что jQuery уже доступенчерез глобальные переменные $ или jQuery.Чтобы это исправить, вызовите autoProvidejQuery () из вашего файла webpack.config.js:

Encore
    // ...
   .autoProvidejQuery()    // add this line into your webpack.config.js file
;

Доступ к jQuery из файлов JavaScript Webpack

Если вашему коду необходим доступ к $ или jQuery ивы находитесь внутри файла, который обрабатывается Webpack / Encore, вы должны удалить все ошибки «$ is notfined», требуя jQuery: var $ = require ('jquery').

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

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

// require jQuery normally
const $ = require('jquery');

+ // create global $ and jQuery variables
+ global.$ = global.jQuery = $;