Webpack Symfony Enore jquery плагины сторонних разработчиков
У меня проблема с реализацией сторонних плагинов jquery в Symfony Webpack на бис. до сих пор у меня есть несколько файлов .js с различной логикой, а также несколько скриптов внутри файлов twig, которые выполняют некоторые из 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 - нет!
Автозаполнение @Sparky IDE просто дает это на основе списков каталогов npm_modules, и эти части кажутся правильными
Я бы не стал так думать. Есть несколько плагинов с похожим названием.
Ответы 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, вам следует удалить все ошибки «$ не определен», потребовав 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 = $;
действительно, я прочитал документацию и хотел бы прокомментировать эту проблему: я думаю, что это проблема с jquery-validate, поскольку я вижу, что пакет jquery-datetimepicker работает нормально. какие-нибудь мысли по этому поводу? Я также отредактирую начальный вопрос, кстати, без использования .autoProvidejQuery (), поскольку он портит конфигурацию
Все вышеперечисленное отлично подходит для работы jQuery и написания кода против него (например, $ ('button'). On ('click') ....). Но в этом ответе ничего не говорится о надстройках / плагинах, которые используют jQuery и ошибку как undefined $ ('table'). Footable () не работает. as ... функция footable () не определена. Вопрос в том, чтобы заставить работать сторонние плагины, а не jQuery.
решение: обновите webpack.config.js информацией о псевдонимах, чтобы каждый сторонний плагин jquery использовал один и тот же jquery
var path = require('path');
Encore
.addAliases({
'jquery': path.join(__dirname, 'node_modules/jquery/src/jquery')
})
Это тоже не проблема. Проблема не в том, что сторонние плагины не могут найти $ или jQuery. Речь идет о том, что сторонний плагин не определен ... что абсолютно должно быть, если вы просмотрите скомпилированный веб-пакет JS.
@tlorens Я думаю, что это может быть связано с тем, что плагины не привязаны к правильному jQuery. У меня был другой пакет (EasyAdminBundle), который уже загружал jQuery: global.$ = global.jQuery = require('jquery');, который немного отличался от моего собственного app.js: const $ = require('jquery');. Когда я использовал метод EasyAdminBundle, мой выбранный плагин JQuery UI внезапно начал работать.
Где это определяется как «проверка jquery»? Плагин называется «jQuery Validate».