Symfony 5 : Ajout de Jquery par webpack encore

**merou19** · 22/11/2021, 15h55

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 !

**merou19** · 22/11/2021, 16h31

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 ?

**armel18** · 22/11/2021, 16h53

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({ } )
 
})

**merou19** · 22/11/2021, 17h19

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 !

Symfony 5 : Ajout de Jquery par webpack encore

Symfony PHP

Discussions similaires

Partager

Partager