NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

Question

J'essaie de résumer mes connaissances sur les gestionnaires de paquets, les regroupeurs et les exécutants de tâches JavaScript les plus populaires. Veuillez me corriger si je me trompe :

• npm & bower sont des gestionnaires de paquets. Ils se contentent de télécharger les dépendances et ne savent pas comment construire des projets par eux-mêmes. Ce qu'ils savent, c'est qu'il faut appeler webpack / gulp / grunt après avoir récupéré toutes les dépendances.
• bower c'est comme npm mais construit un arbre de dépendances aplati (contrairement à npm qui le fait de manière récursive). Signification npm récupère les dépendances pour chaque dépendance (peut récupérer la même chose plusieurs fois), alors que bower vous demande d'inclure manuellement les sous-dépendances. Parfois, bower y npm sont utilisés ensemble pour le front-end et le back-end respectivement (puisque chaque mégaoctet peut avoir de l'importance dans le front-end).
• grunt y gulp sont des exécutants de tâches pour automatiser tout ce qui peut l'être (c'est-à-dire compiler CSS/Sass, optimiser les images, faire un paquet et le minifier/transpiler).
• grunt vs. gulp (c'est comme maven vs. gradle ou configuration vs. code). Grunt est basé sur la configuration de tâches indépendantes distinctes, chaque tâche ouvre/manipule/ferme le fichier. Gulp nécessite moins de code et est basé sur les flux Node, ce qui lui permet de construire des chaînes de tuyaux (sans rouvrir le même fichier) et le rend plus rapide.
• webpack ( webpack-dev-server ) - pour moi, il s'agit d'un gestionnaire de tâches avec rechargement à chaud des modifications, ce qui permet d'oublier tous les observateurs JS/CSS.
• npm / bower + les plugins peuvent remplacer les task runners. Leurs capacités se recoupent souvent, ce qui entraîne des implications différentes si vous devez utiliser gulp / grunt sur npm + plugins. Mais les task runners sont définitivement meilleurs pour les tâches complexes (par exemple : "à chaque build, créer un bundle, transpiler de ES6 à ES5, l'exécuter sur tous les émulateurs de navigateurs, faire des captures d'écran et déployer sur dropbox via ftp").
• browserify permet d'empaqueter des modules de nœuds pour les navigateurs. browserify vs node 's require est en fait AMD et CommonJS .

Questions :

1. Qu'est-ce que webpack & webpack-dev-server ? La documentation officielle dit que c'est un module bundler mais pour moi c'est juste un task runner. Quelle est la différence ?
2. Où utiliseriez-vous browserify ? Ne peut-on pas faire la même chose avec les importations node/ES6 ?
3. Quand utiliseriez-vous gulp / grunt sur npm + plugins ?
4. Veuillez fournir des exemples de cas où vous devez utiliser une combinaison

Answer 1

Webpack est un regroupeur. Comme Browserfy il recherche dans le codebase les demandes de modules ( require o import ) et les résout de manière récursive. De plus, vous pouvez configurer Webpack pour résoudre non seulement les modules de type JavaScript, mais aussi les CSS, les images, le HTML, littéralement tout. Ce qui m'enthousiasme particulièrement Webpack vous pouvez combiner des modules compilés et chargés dynamiquement dans la même application. Vous obtenez ainsi un réel gain de performance, en particulier avec HTTP/1.x. Je vous explique ici comment procéder avec des exemples. http://dsheiko.com/weblog/state-of-javascript-modules-2017/ Comme alternative au bundler, on peut penser à Rollup.js ( https://rollupjs.org/ ), qui optimise le code pendant la compilation, mais en enlevant tous les morceaux inutilisés trouvés.

Pour AMD au lieu de RequireJS on peut aller avec des natifs ES2016 module system mais chargé de System.js ( https://github.com/systemjs/systemjs )

D'ailleurs, j'aimerais souligner que npm est souvent utilisé comme un outil d'automatisation comme grunt o gulp . Vérifiez https://docs.npmjs.com/misc/scripts . Personnellement, je vais maintenant avec npm scripts seulement en évitant d'autres outils d'automatisation, bien que dans le passé, j'étais beaucoup dans grunt . Avec d'autres outils, vous devez compter sur d'innombrables plugins pour les paquets, qui ne sont souvent pas bien écrits et ne sont pas activement maintenus. npm connaît ses paquets, de sorte que vous pouvez appeler n'importe quel paquet installé localement par son nom, par exemple :

{
  "scripts": {
    "start": "npm http-server"
  },
  "devDependencies": {
    "http-server": "^0.10.0"
  }
}

En fait, en règle générale, vous n'avez pas besoin de plugin si le paquet supporte le CLI.

Answer 2

Yarn est un gestionnaire de paquets récent qui mérite sans doute d'être mentionné.
Alors, voilà : https://yarnpkg.com/

Pour autant que je sache, il peut récupérer les dépendances de npm et de bower et possède d'autres fonctionnalités appréciées.