IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Symfony PHP Discussion :

Symfony 5 : Ajout de Jquery par webpack encore


Sujet :

Symfony PHP

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    janvier 2010
    Messages
    97
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : janvier 2010
    Messages : 97
    Points : 85
    Points
    85
    Par défaut Symfony 5 : Ajout de Jquery par webpack encore
    Bonjour à tous,

    Il y a un point que je ne comprends pas dans l'utilisation de Jquery par yarn et webpack encore sous Symfony 5.

    Sur mon site, Jquery fonctionne bien sur toutes les pages, sauf une, où j'ai dû ajouter un lien vers Jquery du cdn.

    Par Yarn, j'ai bien Jquery 3.6.0 installé.

    Voici mon code :

    assets/app.js
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    import jquery from 'jquery';
    import 'jquery-ui';
     
    global.$ = global.jQuery = $;
     
    require('bootstrap');
     
    import '/assets/styles/global.scss';
     
    import '/node_modules/bootstrap/dist/css/bootstrap.min.css';
    import '/node_modules/jquery-ui/themes/base/theme.css';
    import '/node_modules/jquery-ui/themes/base/datepicker.css';
    import '/node_modules/jquery-ui/themes/base/slider.css';
    import '/public/resources/css/monprojet.css';
     
    import chart from 'chart.js';
     
    // start the Stimulus application
    import './bootstrap';

    webpack.config.js
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    const Encore = require('@symfony/webpack-encore');
     
    // Manually configure the runtime environment if not already configured yet by the "encore" command.
    // It's useful when you use tools that rely on webpack.config.js file.
    if (!Encore.isRuntimeEnvironmentConfigured()) {
        Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
    }
     
    Encore
        // directory where compiled assets will be stored
        .setOutputPath('public/build/')
        // public path used by the web server to access the output path
        .setPublicPath('/monprojet/public/build')
        // only needed for CDN's or sub-directory deploy
        //.setManifestKeyPrefix('build/')
        .setManifestKeyPrefix('public/build/')
     
        /*
         * ENTRY CONFIG
         *
         * Each entry will result in one JavaScript file (e.g. app.js)
         * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
         */
        .addEntry('app', './assets/app.js')
     
        .addEntry('jquery', '/node_modules/jquery/dist/jquery.min.js')
        .addEntry('bootstrap', '/node_modules/bootstrap/dist/js/bootstrap.min.js')
        .addEntry('datepicker', '/node_modules/jquery-ui/ui/i18n/datepicker-fr.js')
        .addEntry('slider', '/node_modules/jquery-ui/ui/widgets/slider.js')
        .addEntry('monprojet', '/public/resources/js/monprojet.js')
     
        // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
        .enableStimulusBridge('./assets/controllers.json')
     
        // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
        .splitEntryChunks()
     
        // will require an extra script tag for runtime.js
        // but, you probably want this, unless you're building a single-page app
        .enableSingleRuntimeChunk()
        //.disableSingleRuntimeChunk()
     
        /*
         * 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())
     
        .configureBabel((config) => {
            config.plugins.push('@babel/plugin-proposal-class-properties');
        })
     
        // enables @babel/preset-env polyfills
        .configureBabelPresetEnv((config) => {
            config.useBuiltIns = 'usage';
            config.corejs = 3;
        })
     
        // enables Sass/SCSS support
        .enableSassLoader()
     
        // uncomment if you use TypeScript
        //.enableTypeScriptLoader()
     
        // uncomment if you use React
        //.enableReactPreset()
     
        // uncomment to get integrity="..." attributes on your script & link tags
        // requires WebpackEncoreBundle 1.4 or higher
        //.enableIntegrityHashes(Encore.isProduction())
     
        // uncomment if you're having problems with a jQuery plugin
        .autoProvidejQuery()
    ;
     
    module.exports = Encore.getWebpackConfig();

    base.html.twig
    Code twig : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {% block stylesheets %}
    	{{ encore_entry_link_tags('app') }}
    {% endblock stylesheets %}
     
    {% block javascripts %}
    	{{ encore_entry_script_tags('app') }}
    	{{ encore_entry_script_tags('jquery') }}
    	{{ encore_entry_script_tags('bootstrap') }}
    	{{ encore_entry_script_tags('datepicker') }}
    	{{ encore_entry_script_tags('slider') }}
    	{{ encore_entry_script_tags('monprojet') }}
    {% endblock javascripts %}

    C'est ma page avec mon slider qui ne marche pas quand je ne mets pas le lien du cdn. Avec ce lien codé en dur dans cette page, ça fonctionne nickel.
    Dans d'autres pages, sans ce lien, mes datepicker et mes contrôles en javascript fonctionnent bien.

    Donc, ai je bien fait l'import de Jquery ?

    Tous mes css sont bien compilés dans app, la ligne encore_entry_link_tags('app') suffit.
    Est ce que c'est pareil pour les js, je ne devrais mettre qu'une seule ligne encore_entry_script_tags('app') ?
    Ou il faut, comme j'ai fait, laisser dans le html les appels à chaque entry que j'ai mis dans webpack.config.js ?

    A chaque modif de mon code, je recompile les css et js, et je vide le cache de Symfony et de mon navigateur. Est ce que j'oublie quelque chose ?

    Vous avez des idées pour mon problème ?

    Merci d'avance à vous !

  2. #2
    Membre régulier
    Profil pro
    Inscrit en
    janvier 2010
    Messages
    97
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : janvier 2010
    Messages : 97
    Points : 85
    Points
    85
    Par défaut
    Bon, j'ai avancé sur mon problème, je m'autoréponds !

    Selon l'exemple ici : https://symfony.com/doc/current/fron...e-example.html
    J'ai ajouté un fichier greet.js, et sur toutes mes pages, j'ai le message : Yo yo AZERTY - welcome to Encore!
    Donc Jquery est bien chargé comme je fais !
    Mais si vous voyez des erreurs dans mon code ci dessus, je suis preneur...

    Sur ma page qui pose problème, sans le lien du cdn, j'ai mon message yo yo... mais pas mon slider.
    En ajoutant le lien du cdn, j'ai les 2.

    Pourtant, entre yarn pour mon projet et le cdn, j'utilise bien la même version de Jquery, v3.6.0.

    Vous avez des idées svp ?

  3. #3
    Membre éprouvé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    août 2012
    Messages
    618
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : août 2012
    Messages : 618
    Points : 1 117
    Points
    1 117
    Par défaut
    bonjour,
    juste une astuce pour tester le chargement de jquery dans la page qui pose problème:

    base.html.twig
    Code twig : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    {% block javascripts %}
       {{ encore_entry_script_tags('app') }}
       {{ encore_entry_script_tags('jquery') }} {# pas nécessaire, car  jquery est déjà présent dans le fichier app.js #}
     
        <script>
             $("body").css("background", "deepskyblue");
       </script>
    {% endblock javascripts %}
    si la couleur de fond de la page passe au bleu c'est que jQuery est bien chargé. Dans ce cas alors le problème viendrait de l'ordre de chargement des scripts.
    Si problème d'ordre de chargement il va falloir attendre que le DOM soit complètement chargé genre:
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    //dans le fichier JS du slider
    window.addEventListener('load', function() {
        //ici tu appelles les fonctions du slider
       // $("#id-du-slider").slider({ } )
     
    })

  4. #4
    Membre régulier
    Profil pro
    Inscrit en
    janvier 2010
    Messages
    97
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : janvier 2010
    Messages : 97
    Points : 85
    Points
    85
    Par défaut
    YES trop fort, merci beaucoup !!!

    Pour mon slider et le background, je mets le code que tu donnes :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <script>
        window.addEventListener('load', function() {
            $("body").css("background", "deepskyblue");
        });
    </script>

    Et c'est nickel, je n'ai plus besoin du cdn

    Merci encore !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [4.x] Symfony 4 : impossible de supprimer Webpack encore ?
    Par sam.gratt dans le forum Symfony
    Réponses: 0
    Dernier message: 24/06/2021, 23h04
  2. Symfony 5 + Webpack Encore + VueJS
    Par Smlh.dev dans le forum Symfony
    Réponses: 1
    Dernier message: 22/04/2021, 09h44
  3. [4.x] Pb WebPack Encore avec symfony
    Par Shandler dans le forum Symfony
    Réponses: 0
    Dernier message: 23/02/2021, 19h54
  4. Symfony + Foundation(ZURB) + Webpack Encore
    Par xidoc dans le forum Symfony
    Réponses: 0
    Dernier message: 21/12/2019, 22h32
  5. Réponses: 0
    Dernier message: 06/02/2018, 23h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo