Vue.js / Webpack - Chargement de fichiers JS

Pandazaur
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

Pandazaur
Auteur
Réponse acceptée

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')
 ...
Defy

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
Auteur

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 ?

speedounours

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

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