Besoin d'aide ?

NPM et BaguetteBox.js

Avatar de code-plane
code-plane

Bonjour,

j'aimerai comprendre l'utilisation d'un package NPM avec un projet Laravel. (que j'utilise pour la première fois, c'est ma première application web que je développe et j'ai choisi Laravel). Depuis GitHub, j'ai importé le projet "baguetteBox.js" afin de créer une galerie responsive avec des interactions de navigation simplifié via du javascript. https://feimosi.github.io/baguetteBox.js/ J'ai donc lu la documentation (Readme) https://github.com/feimosi/baguetteBox.js et réalisé l'installation avec la cmd "npm install baguettebox.js --save". Ensuite j'ai lancé la cmd "npm run dev". Jusque là tout va bien! Je retrouve les fichiers dans le package-lock.json

  "baguettebox.js": {
      "version": "1.11.1",
      "resolved": "https://registry.npmjs.org/baguettebox.js/-/baguettebox.js-1.11.1.tgz",
      "integrity": "sha512-0HnUVs+xaqwQOVbfi0kwZnZ1fJNWE5vJLCoCAtgQBtPmOJa1fhN8gubaBFOBGDkQy/vz6PWSr7B3WilhQKjyeQ=="
    },

et aussi dans package.json

  "dependencies": {
    "baguettebox.js": "^1.11.1",
    "jquery-bridget": "^2.0.1",
    "masonry-layout": "^4.2.2"
  }
}

Mais comment les utiliser ? Comment les appeller ?

Je dois insérer où ? => const baguetteBox = require('baguettebox.js');

où je récupère le CSS ? Pour éditer mes vues ? et que les classes soit reconnu ?

De plus, où doit je initialiser le script de démarage:

baguetteBox.run('.gallery');

J'ai compris que Laravel Mix étais là pour compiler les scipts CSS JS etc pour les minifier, as t-il d'autres utilités ?

Merci par avance pour votre aide.

Posté il y a 1 mois
Avatar de bestmomo
bestmomo

Salut,

Laravel Mix est un wrapper de Webpack. Pour charger tes librairies tu peux mettre tes require et initialisations dans un fichier que tu traites ensuite avec Mix. par défaut tu as un fichier resources/js/bootstrap qui comporte déjà des initialisations mais tu peux réorganiser tout ça.

Mix permet aussi de copier des fichiers et dossiers.

Posté il y a 1 mois

Vous ne pouvez pas répondre à ce sujet.