Symfony 4 / Webpack Encore: jQuery не работает - PullRequest
Новая
       28

Symfony 4 / Webpack Encore: jQuery не работает

0 голосов
/ 07 января 2019

jQuery не работает, и я не могу использовать раскрывающийся список начальной загрузки, пользовательский JavaScript ...

После npm run dev (или npm run build) файл app.js хорошо создается и загружается в браузер.

Компиляция выполнена без ошибок.

Я пытался включить .autoProvidejQuery() затем npm run dev / npm run build, но ничего не изменилось.

Я использую Symfony 4.1.6

Решение найдено

Измените .enableSingleRuntimeChunk () на .disableSingleRuntimeChunk () в webpack.config.js

Если вы просто прокомментируете строку, она работает, но вы получаете предупреждение при запуске npm run dev или npm run build.

package.json 

"devDependencies": {
    "@symfony/webpack-encore": "^0.22.0",
    "bootstrap": "^4.2.1",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.6",
    "webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
},
"dependencies": {
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0"
}

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')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
     */
    .addEntry('js/app', './assets/js/app.js')
    .addEntry('js/ad', './assets/js/ad.js')
    .addStyleEntry('css/app', './assets/css/app.scss')
    //.addStyleEntry('css/bootstrap', './assets/css/bootstrap.min.css')

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables Sass/SCSS support
    .enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()

    // uncomment if you use API Platform Admin (composer req api-admin)
    //.enableReactPreset()
    //.addEntry('admin', './assets/js/admin.js')
;

module.exports = Encore.getWebpackConfig();

app.js 

const $ = require('jquery');

global.$ = global.jQuery = $;

require('bootstrap');

base.html.twig 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>SymBNB - {% block title %}Bienvenue !{% endblock %}</title>

        <meta name="viewport" content="width=device-width, user-scalable=no">

        <link rel="stylesheet" href="{{ asset('build/css/app.css') }}">

        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous">

        {# <link rel="stylesheet" href="/css/app.css"> #}
        {% block stylesheets %}{% endblock %}
    </head>
    <body>
        {% include 'partials/header.html.twig' %}

        {% block body %}{% endblock %}

        {% include 'partials/footer.html.twig' %}

        {#<script src="/js/jquery.min.js"></script>
        <script src="/js/popper.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>#}
        <script src="{{ asset('build/js/app.js') }}"></script>
        {% block javascripts %}{% endblock %}
    </body>
</html>

Похожие темы:

Webpack Symfony Encore JQuery плагины сторонних производителей

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

Ответы [ 2 ]

0 голосов
/ 15 февраля 2019

Если у вас enableSingleRuntimeChunk() в вашем webpack.config.js, вам нужно добавить <script src="{{ asset('build/runtime.js') }}"></script> в ваш базовый шаблон.

Существует хелпер Twig encore_entry_script_tags() для автоматической обработки.

0 голосов
/ 08 января 2019

Решение найдено

Измените .enableSingleRuntimeChunk () на .disableSingleRuntimeChunk () в webpack.config.js

Если вы просто прокомментируете строку, она работает, но вы получаете предупреждение при запуске npm run dev или npm run build.

...