Salut ,
j'essai d'utiliser webpack pour bundler les js de mon appli. Mais je n'arrive pas à utiliser une classe créée dans un fichier.
Mes fichiers se présentent ainsi :
app.js
bootstrap.js // Bootstrap de l'application avec chargement des lib commune
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 require('./bootstrap'); require('./users');
Ici pas de problème j'ai bien accès à jquery dans mes pages web.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11 try { window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery'); require('bootstrap'); } catch (e) {} require('bootstrap/dist/css/bootstrap.min.css'); require('@fortawesome/fontawesome-free/css/all.min.css'); require('../css/app.css');
users.js // La classe que je souhaiterais utilisé
Et dans mon html je fais :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 class Users { constructor(token) { this.csrf = token; } initEvents() { $('#search_value').on('keyup',(e) => { e.preventDefault(); this.searchUser(); }); } }
Mais j'ai l'errreur :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 <script src="/dist/app.js"></script> <script type="text/javascript"> const token = 'aaaaaa'; const user = new Users(token); user.initEvents(); </script>
Quand je regarde le bundle généré par webpack , je vois bien le code de users.js , mais impossible d'avoir accès à la classe.index:112 Uncaught ReferenceError: Users is not defined
Pour finir mon fichier de config webpack :
Qu'est ce qu'il me manque pour avoir accès a cette classe ? Sachant qu'il y'aura beacoup d'autre classe que j'utiliserais à terme.
Code : 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 module.exports = { entry: './src/ressources/js/app.js', output: { path: __dirname+'/src/pub/dist', filename: 'app.js' }, plugins: [new MiniCssExtractPlugin(),new CleanWebpackPlugin()], module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader' ] }, { test: /\.(svg|gif|jpg|png|eot|woff|woff2|ttf)$/, use: [ 'url-loader', ], } ] }, optimization: { minimize: true, minimizer: [ new TerserPlugin({ extractComments: false, }), new OptimizeCssAssetsPlugin(), ], } }
Partager