Webpack Encore - $ не определено

Question

Я следовал документации, чтобы заставить Webpack Encore работать в моем проекте. Импортированные js-файлы в webpack.config.js работают нормально, но у меня есть проблема в js для конкретной страницы: $ is not defined,

Webpack.config.js:

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

Encore
.setOutputPath('public/build/')
.setPublicPath('http://localhost/tharmo/public/build')
.setManifestKeyPrefix('build/')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.autoProvidejQuery()

.createSharedEntry('vendor', [
    './assets/js/custom.js',
    'materialize-css',
])
.addEntry('app', './assets/js/app.js')
.addEntry('statistiques', './assets/js/statistiques.js')
.addPlugin(new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
}))

.enableSassLoader()
;

module.exports = Encore.getWebpackConfig();

base.html.twig:

<script src="{{ asset('build/manifest.js') }}"></script>
<script src="{{ asset('build/vendor.js') }}"></script>
<script type="text/javascript" src="{{ asset('build/app.js') }}"></script>
<script>
    $(document).ready(function () {
        getNotifications(1);
    });
</script>

$(document).ready не работает

Answer 1

Работаем, следуя документации: https://symfony.com/doc/current/frontend/encore/legacy-apps.html

Я должен был написать это в app.js:

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

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

И я удалил это из webpack.conig.js, так как это эквивалентно .autoProvidejQuery:

.addPlugin(new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
}))

Спасибо за помощь!

Answer 2

Вы должны использовать output.library: "Root" //Or what name you want конфиг в webpack.config.js и в вашем файле js entry сделайте это:

импортировать $ из 'jquery'

... Ваш код файла общей записи

экспорт {$};

И вы получите доступ к jquery, как это:

Корень.$