Vue.js / Webpack - Chargement de fichiers JS

Par Pandazaur, il y a 9 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je charge des fichiers dans cet ordre :

Entourez votre code pour bien le mettre en formeimport 'assets/js/core/jquery.min.js' import 'assets/js/core/bootstrap.min.js' import 'assets/js/core/jquery.slimscroll.min.js' import 'assets/js/core/jquery.scrollLock.min.js' import 'assets/js/core/jquery.appear.min.js' import 'assets/js/core/jquery.countTo.min.js' import 'assets/js/core/jquery.placeholder.min.js' import 'assets/js/core/js.cookie.min.js'

Ce que je veux

Charger mes fichiers javascripts globalement car ils sont utiles à mon thème.

Ce que j'obtiens

Certains fichiers JS nécessitent "jquery" qu'ils ne reconnaissent pas.

L'erreur suivante:

ERROR in ./src/assets/js/core/jquery.scrollLock.min.js | Module not found: Error: Cannot resolve module 'jquery' in /yuzu/src/assets/js/core | @ ./src/assets/js/core/jquery.scrollLock.min.js 10:46-67 | | ERROR in ./src/assets/js/core/jquery.countTo.min.js | Module not found: Error: Cannot resolve module 'jquery' in /yuzu/src/assets/js/core | @ ./src/assets/js/core/jquery.countTo.min.js 14:46-67 | | ERROR in ./src/assets/js/core/jquery.placeholder.min.js | Module not found: Error: Cannot resolve module 'jquery' in /yuzu/src/assets/js/core | @ ./src/assets/js/core/jquery.placeholder.min.js 10:46-67 | ERROR in ./src/assets/js/plugins/jquery-validation/jquery.validate.min.js | Module not found: Error: Cannot resolve module 'jquery' in /yuzu/src/assets/js/plugins/jquery-validation | @ ./src/assets/js/plugins/jquery-validation/jquery.validate.min.js 10:46-67

Et aussi cette erreur:

Uncaught Error: Bootstrap's JavaScript requires jQuery

Help please.

4 réponses

Defy, il y a 9 ans

ben il suffit d'importer jquery aussi dans les endroit qu'il a besoin.
a priori tu utilise le systeme d'import ES6 du coup tu pourrais faire quelque chose du genre

import $ from 'jquery' window.$ =$
Pandazaur, il y a 9 ans

Salut,

J'ai cette erreur:

Uncaught Error: Bootstrap's JavaScript requires jQuery

J'ai essayé de faire ça:

import $ from 'assets/js/core/jquery.min.js' window.$ = $; window.jQuery = $; import 'assets/js/core/bootstrap.min.js' import 'assets/js/core/jquery.slimscroll.min.js' import 'assets/js/core/jquery.scrollLock.min.js' import 'assets/js/core/jquery.appear.min.js' import 'assets/js/core/jquery.countTo.min.js' import 'assets/js/core/jquery.placeholder.min.js' import 'assets/js/core/js.cookie.min.js' import 'assets/js/app.js' import 'assets/js/plugins/jquery-validation/jquery.validate.min.js' import 'assets/js/pages/base_pages_login.js'

Il doit y avoir un moyen d'avoir tous ces fichiers de manière globale sans avoir à les inclures dans chaque composant, non ?

Pandazaur, il y a 9 ans

J'ai enfin trouvé la solution.

Pour charger des fichiers javascript "globalement" (c'est à dire présents dans la variable "window" et accessible de partout) j'ai utilisé script-loader. Dans mon fichier main.js j'ai chargé mes fichiers de cette manière:

require('script!assets/js/core/bootstrap.min.js') require('script!assets/js/core/jquery.slimscroll.min.js') ...
speedounours, il y a 9 ans

[@Pandazaur]()
Tu peux ajouter ceci à ta configuration webpack

plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ]