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:
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:
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:
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 !
