Laravel 5

utilisation modules js intallés grâce à npm

  • Avatar de dassoun
    Membre depuis :
    11/12/2018
    Messages :
    19

    Bonjour,
    J'ai installé toastr grâce à npm.
    Je me demande comment l'utiliser.
    Je suis tombé là-dessus
    C'est presque trop facile...
    Donc j'imagine qu'il me faut un
    var toastr = require('toastr');
    Mais vu le fichier app.js, je le mets où mon code?

    (je suis en 5.7)
    (désolé si la question existe, je ne trouve pas de champ de recherche sur le forum)

    Merci

  • Avatar de dassoun
    Membre depuis :
    11/12/2018
    Messages :
    19

    ah mais non...
    manifestement, ce n'est pas la solution.
    app.js a l'air d'être issu d'une compilation. En effet un

    npm run dev

    efface mes modifs dans ce fichier.
    Des pistes?

    Merci

  • Avatar de bestmomo
    Membre depuis :
    07/04/2013
    Messages :
    2450

    Salut,

    Tu dois faire les modifs dans resources/js/app.js.

  • Avatar de dassoun
    Membre depuis :
    11/12/2018
    Messages :
    19

    Merci!

    Si j'ajoute
    var toastr = require('toastr');
    au fichier resources/js/app.js
    j'obtiens

    ERROR in ./resources/js/app.js
    Module not found: Error: Can't resolve 'toastr' in 'C:\www\monsite\resources\js'
    @ ./resources/js/app.js 10:13-30
    @ multi ./resources/js/app.js ./resources/sass/app.scss

  • Avatar de dassoun
    Membre depuis :
    11/12/2018
    Messages :
    19

    Si en m'inspirant de

    // Bootstrap
    @import '~bootstrap/scss/bootstrap';

    Je fais

    // Toastr
    @import '~toastr/toastr';

    (on a node_modules/toastr/toastr.scss, comme on a node_modules/bootstrap/scss/bootstrap.scss)
    J'obtiens

    Module build failed:
    @import '~toastr/toastr';
    ^
    File to import not found or unreadable: ~toastr/toastr.
    in C:\www\monsite\resources\sass\app.scss (line 12, column 1)

  • Avatar de dassoun
    Membre depuis :
    11/12/2018
    Messages :
    19

    Pardon pardon...
    Je me suis fait avoir!
    Comme je tente plein de trucs, je ne sais plus ce que je fais... :/
    J'avais désinstallé toastr (npm uninstall toaster, j'ai la commande dans mon historique), mais celui-ci apparaissait encore dans l'arboresscence sous visual studio code.

    Je viens de l'y réinstaller, et du coup, il semble que faire la modif dans resources/js/app.js suffise. En tout cas, je n'ai plus d'erreur au build.

    Je continue...

    Merci!

  • Avatar de dassoun
    Membre depuis :
    11/12/2018
    Messages :
    19

    Donc j'ai bien modifié mon resources/js/app.js pour y ajouter
    var toastr = require('toastr');
    Je retrouve bien des références à toastr dans public/js/app.js après mon build.

    Mais dans ma vue, au retour ajax, si je fais
    toastr.success('Hé, <b>ça marche !</b>', 'Test');

    J'ai le message

    ReferenceError: toastr is not defined

    dans la console.

  • Avatar de dassoun
    Membre depuis :
    11/12/2018
    Messages :
    19

    Plutôt que
    var toastr = require('toastr');

    Si je déclare, toujours dans resources/js/app.js
    window.toastr = require('toastr');

    alors toastr est accessible depuis la vue.

    La notification pop bien lors de l'exécution de
    toastr.success('Hé, <b>ça marche !</b>', 'Test');

    Ca se passe en revanche comme s'il n'y avait pas de css: la notif pop en bas de page, sans style particulier.
    A noter en revanche que même en déclarant le css issu d'un cdn, ça n'arrange pas l'affaire :/
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />

  • Avatar de dassoun
    Membre depuis :
    11/12/2018
    Messages :
    19

    Il fallait également ajouter
    @import '~toastr/toastr';

    au fichier ressources/app.scss

Vous ne pouvez pas répondre à ce sujet.