IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Outils Discussion :

[webpack] Question sur les imports / require


Sujet :

Outils

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Avril 2007
    Messages
    115
    Détails du profil
    Informations forums :
    Inscription : Avril 2007
    Messages : 115
    Par défaut [webpack] Question sur les imports / require
    Bonjour à tous !

    Je ne sais pas trop où poster ce message, j'ai hésité entre javascript et nodejs, mais je ne suis pas sur que ce soit approprié.

    Je commence en ce moment un projet, et j'ai installé webpack (https://github.com/symfony/webpack-encore) pour la minification js, et la compilation sass en css. Le projet se fait aussi en utilisant bootstrap, et jquery qui va avec pour la partie js.
    Je me retrouve avec ce problème :
    jQuery.Deferred exception: $(...).tooltip is not a function ./assets/js/main.js/</<@http://sandbox._.dev/build/js/main.js:77:5
    mightThrow@http://sandbox._.dev/build/js/main.js:3624:21
    resolve/</process<@http://sandbox._.dev/build/js/main.js:3692:12
    undefined
    jquery.js:3818
    TypeError: $(...).tooltip is not a function
    [En savoir plus]
    Webpack isole donc le build de l'extérieur, donc bootstrap n'est pas accessible.
    Est-on d'accord que require importe tout le contenu du fichier source dans le build ?
    Si c'est le cas, c'est problématique de faire un require dans chaque fichier parce que cela prend faire du code dupliqué dans chaque fichier buildé.

    Avez vous des manières de faire sur vos projets pour ce genre de problèmes ?

  2. #2
    Expert confirmé
    Avatar de Marco46
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Août 2005
    Messages
    4 419
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Août 2005
    Messages : 4 419
    Par défaut
    Je ne sais pas trop où poster ce message, j'ai hésité entre javascript et nodejs, mais je ne suis pas sur que ce soit approprié.
    C'est très bien ici, webpack c'est plutôt pour générer des livrables fronts (même si ça reste un programme node).

    Je me retrouve avec ce problème

    $(...).tooltip is not a function
    A la lecture du message j'ai l'impression qu'il cherche le tooltip de jQuery-ui dans jQuery.

    Webpack isole donc le build de l'extérieur, donc bootstrap n'est pas accessible.
    Je ne comprends pas. Webpack prend le point d'entrée de ton appli et descend dans la hiérarchie via les require. Si bootstrap n'est jamais require il va y avoir un soucis.

    T'aurais pas un soucis de config ?

    Si c'est le cas, c'est problématique de faire un require dans chaque fichier parce que cela prend faire du code dupliqué dans chaque fichier buildé.
    Non si tu require lodash dans 3 fichiers sources différents il n'importe pas 3 fois lodash, seulement une fois. Ou alors j'ai mal compris ce que tu voulais dire.

  3. #3
    Membre confirmé
    Inscrit en
    Avril 2007
    Messages
    115
    Détails du profil
    Informations forums :
    Inscription : Avril 2007
    Messages : 115
    Par défaut
    Je te remercie pour ton message, surtout le dernier point qui m'éclaire pas mal dans mes questionnements par rapport à webpack.

    Alors pour le tooltip (qui est un tooltip bootstrap), il n'était pas disponible parce que je ne faisais pas de require de bootstrap dans le fichier. Après le require ça fonctionne bien, mais cette méthode ne me convenait pas forcément, j'explique plus bas pourquoi. Par ailleurs, après avoir cherché, j'ai vu qu'on pouvait exposer des fonctions avec webpack afin qu'ils soient disponibles à l'extérieux et ça ça peut être intéressant pour ce que je souhaite !

    Plus concrètement, l'un des besoins est d'avoir une application qui soit le moins lourd possible. J'ai donc fait le choix de ne pas avoir un un seul fichier js avec tout le js minimifié dedans. Mais plutôt d'avoir un fichier js minimifié avec les libs utilisées partout (bootstrap, jquery, ...) et un fichier avec seules les fonctions utilisées sur la page. Ce qui revient à avoir un fichier js par page concrètement.

    Donc je me demandais comment je pourrais utiliser les fonctions des libs dans d'autres fichiers. Et je me demandais comment faisaient les autres sur d'autres projets qui ne soient ni en SPA, ni en un fichier min.

    En tout cas merci pour ton aide !

  4. #4
    Expert confirmé
    Avatar de Marco46
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Août 2005
    Messages
    4 419
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Août 2005
    Messages : 4 419
    Par défaut
    Citation Envoyé par JackStrieger Voir le message
    Plus concrètement, l'un des besoins est d'avoir une application qui soit le moins lourd possible. J'ai donc fait le choix de ne pas avoir un un seul fichier js avec tout le js minimifié dedans. Mais plutôt d'avoir un fichier js minimifié avec les libs utilisées partout (bootstrap, jquery, ...) et un fichier avec seules les fonctions utilisées sur la page. Ce qui revient à avoir un fichier js par page concrètement.
    Je pense que c'est une erreur de vouloir faire ça. Tu vas te compliquer la vie pour rien et ça va être un enfer à maintenir.

    La meilleure façon de procéder c'est d'avoir un seul bundle contenant absolumeent tout. Avec le tree shaking, Webpack est capable de n'ajouter au bundle que les parties de tes dépendances (et même de ton code) qui sont require (alors en fait il faudrait que tu utilises les imports ES6 pour ça, et pas le require de CommonJS, mais la refacto peut valoir le coup !). Donc en gros si bootstrap minifié fait 500ko (je dis n'importe quoi sur les valeurs), mais que tu n'utilises que pour 50 ko de la lib, Webpack est capable de n'importer que les 50 ko nécessaire en descendant dans les require.

    Par ailleurs, n'oublie pas que les navigateurs ont une gestion du cache, donc un utilisateur ne téléchargera qu'une seule fois le bundle. Alors que si tu commences à faire un bundle dédié par page tu vas lui faire télécharger autant de bundle qu'il n'a de pages ...

    EDIT : Si ton sujet est résolu de ton point de vue merci de marquer le sujet comme tel !

  5. #5
    Membre confirmé
    Inscrit en
    Avril 2007
    Messages
    115
    Détails du profil
    Informations forums :
    Inscription : Avril 2007
    Messages : 115
    Par défaut
    Merci pour cet avis ! C'est exactement ce que je cherchais, je ne connaissais pas le tree shaking !

  6. #6
    Expert confirmé
    Avatar de Marco46
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Août 2005
    Messages
    4 419
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Août 2005
    Messages : 4 419
    Par défaut
    Attention pour bénéficier du tree shaking il faut absolument utiliser la syntaxe des modules ES6 et le destructuring :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    import { fonctionA, fonctionB, fonctionE } from './module.js';
    et non la syntaxe CommonJS :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    const module = require('module');
    Grace au destructuring, Webpack sait quels morceaux du module ton appli utilise, et c'est comme ça qu'il peut choisir ce qu'il importe dans son bundle.

    Donc ça peut imposer un refactoring important pour passer de CommonJS aux modules ES6.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. questions sur les "import" et une "class extends"
    Par miniRoshan dans le forum Général Java
    Réponses: 5
    Dernier message: 21/04/2010, 14h35
  2. Question sur les import
    Par Snote100024 dans le forum Général Java
    Réponses: 1
    Dernier message: 24/02/2010, 11h24
  3. Question sur les "import"
    Par Iyoiyo dans le forum Langage
    Réponses: 4
    Dernier message: 19/05/2009, 12h52
  4. Question sur les Importations
    Par Naarshakta dans le forum Général Python
    Réponses: 3
    Dernier message: 26/09/2008, 18h29
  5. Question sur les import
    Par zoullou dans le forum Langage
    Réponses: 4
    Dernier message: 29/04/2006, 21h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo