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

Mise À Jour Juin 2018

apprendre le JavaScript moderne est difficile si vous n'avez pas été là depuis le début. Si vous êtes le nouveau venu, n'oubliez pas de vérifier cet excellent écrit pour avoir un meilleur aperçu.

https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

Mise À Jour En Juillet 2017

récemment, j'ai trouvé un guide très complet de L'équipe Grab sur la façon d'aborder le développement front-end en 2017. Vous pouvez le vérifier ci-dessous.

https://github.com/grab/front-end-guide

---

j'ai également été à la recherche pour cela un certain temps car il ya beaucoup d'outils sur et chaque des avantages sous un autre aspect. La communauté est divisée entre des outils comme Browserify, Webpack, jspm, Grunt and Gulp . Vous entendrez peut-être aussi parler de Yeoman or Slush . Ce n'est pas vraiment un problème, c'est juste déroutant pour tout le monde qui essaie de comprendre une voie claire vers l'avenir.

de toute façon, je voudrais contribuer quelque chose.

1. Le Gestionnaire De Package

les gestionnaires de paquets simplifient l'installation et mise à jour des dépendances de projet, qui sont des bibliothèques telles que: jQuery, Bootstrap , etc - Tout ce qui est utilisé sur votre site et n'est pas écrit par vous.

parcourir tous les sites Web de la bibliothèque, télécharger et déballer les archives, copier des fichiers dans les projets - tout cela est remplacé par quelques commandes dans le terminal.

• NPM Node JS package manager vous aide à gérer toutes les bibliothèques sur lesquelles repose votre logiciel. Vous définissez vos besoins dans un fichier appelé package.json et exécuter npm install dans la ligne de commande... puis BANG, vos paquets sont téléchargés et prêts à l'emploi. Pourrait être utilisé à la fois pour front-end and back-end bibliothèques.

• Bower : pour la gestion frontale des paquets, le concept est le même que pour la NGP. Tous vos bibliothèques sont stockées dans un fichier nommé bower.json et puis exécuter bower install dans la ligne de commande.

la plus grande différence entre Bower et NPM est que NPM ne arbre de dépendance tandis que Bower nécessite un arbre de dépendance plat comme ci-dessous.

citant Quelle est la différence entre Bower et npm?

MNP

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A 
    -> dependency D

la Charmille

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

il y a des mises à jour sur npm 3 Duplication and Deduplication , veuillez ouvrir le doc pour plus de détails.

• Yarn : un nouveau gestionnaire de paquets pour JavaScript publié par Facebook récemment avec plus d'avantages par rapport à NPM . Et avec le fil, vous pouvez toujours utiliser à la fois NPM et Bower Registre pour aller chercher le paquet. Si vous avez déjà installé un paquet, yarn crée une copie en cache qui facilite offline package installs .

• jspm : est un gestionnaire de paquets pour le chargeur de module universel SystemJS , construit sur le dessus du chargeur de module dynamique ES6 . Il ne s'agit pas d'un gestionnaire de paquets entièrement nouveau avec son propre ensemble de règles, mais il fonctionne en plus des sources de paquets existantes. Sorti de la boîte, il fonctionne avec GitHub et npm . Comme la plupart des paquets basés sur Bower sont basés sur GitHub , nous pouvons installer ces paquets en utilisant jspm . Il a un registre qui répertorie la plupart des front-end couramment utilisés paquets pour une installation plus facile.

voir la différence entre Bower et jspm : Package Manager: Bower vs jspm

---

2. Module De Chargement / Empaquetage

la plupart des projets, quelle que soit leur échelle, auront leur code partagé entre nombre de fichiers. Vous pouvez simplement inclure chaque fichier avec une balise <script> individuelle, cependant, <script> établit une nouvelle connexion http, et pour les petits fichiers – ce qui est un objectif de modularité – le temps de mettre en place la connexion peut prendre beaucoup plus de temps que le transfert des données. Pendant que les scripts sont téléchargés, aucun contenu ne peut être modifié sur la page.

• le problème du temps de téléchargement peut en grande partie être résolu en concaténant un groupe de modules en un seul fichier, et minifying it.

E. g

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>

• la performance vient au détriment de la flexibilité cependant. Si vos modules ont une interdépendance, ce manque de flexibilité peut être un showstopper.

E. g

<head>
    <title>Skateboard</title>
    <script src=“connectors/axle.js”></script>
    <script src=“frames/board.js”></script>
    <!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
    <script src=“rolling-things/abstract-rolling-thing.js”></script>
    <script src=“rolling-things/wheels/skateboard-wheel.js”></script>
    <!-- but if skateboard-wheel also depends on ball-bearing -->
    <!-- then having this script tag here could cause a problem -->
    <script src=“rolling-things/ball-bearing.js”></script>
    <!-- connect wheels to axle and axle to frame -->
    <script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>

les Ordinateurs peuvent faire mieux que vous pouvez, et c'est pourquoi vous devez utiliser un outil automatiquement regroupez tout en un seul fichier.

alors nous avons entendu parler de RequireJS , Browserify , Webpack et SystemJS

• RequireJS : est un chargeur de fichiers et de modules JavaScript . Il est optimisé pour une utilisation dans le navigateur, mais il peut être utilisé dans D'autres environnements JavaScript, comme Node .

e. g: myModule.js

// package/lib is a dependency we require
define(["package/lib"], function (lib) {

    // behavior for our module
    function foo() {
        lib.log( "hello world!" );
    }

    // export (expose) foo to other modules as foobar
    return {
        foobar: foo
    }
});

dans main.js , nous pouvons importer myModule.js comme dépendance et l'utiliser.

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

et ensuite dans notre HTML , nous pouvons nous référer à utiliser avec RequireJS .

<script src=“app/require.js” data-main=“main.js” ></script>

en savoir plus sur CommonJS et AMD pour obtenir la compréhension facilement. Relation between CommonJS, AMD and RequireJS?

• Browserify : mis en place pour permettre l'utilisation de CommonJS modules formatés dans le navigateur. Par conséquent, Browserify n'est pas autant un chargeur de modules qu'un chargeur de modules: Browserify est entièrement un outil de compilation, produisant un paquet de code qui peut ensuite être chargé côté client.

démarrer avec une machine de construction qui a le noeud & npm installé, et obtenir le paquet:

npm install -g –save-dev browserify

écrivez vos modules dans CommonJS format

//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));

et quand vous êtes heureux, envoyez la commande à bundle:

browserify entry-point.js -o bundle-name.js

Browserify trouve récursivement toutes les dépendances du point d'entrée et les assemble en un seul fichier:

<script src=”bundle-name.js”></script>

• Webpack : il regroupe tous vos actifs statiques, y compris JavaScript , images, CSS et plus, en un seul fichier. Il vous permet également de traiter les fichiers par différents types de chargeurs. Vous pouvez écrire votre JavaScript avec la syntaxe des modules CommonJS ou AMD . Il attaque le problème de construction d'une manière fondamentalement plus intégrée et opiniâtre. Dans Browserify vous utilisez Gulp/Grunt et une longue liste de transformations et de plugins pour faire le travail. Webpack offre assez de puissance hors de la boîte que vous n'avez généralement pas besoin Grunt ou Gulp .

L'usage de base est au-delà de la simple. Installer Webpack comme Browserify:

npm install -g –save-dev webpack

et passer la commande un point d'entrée et un fichier de sortie:

webpack ./entry-point.js bundle-name.js

• SystemJS : est un chargeur de modules qui peut importer des modules à l'exécution dans l'un des formats populaires utilisés aujourd'hui ( CommonJS, UMD, AMD, ES6 ). Il est construit en plus du chargeur de module ES6 polyfill et est assez intelligent pour détecter le format utilisé et le manipuler de manière appropriée. SystemJS peut également transférer le code ES6 (avec Babel ou Traceur ) ou d'autres langues telles que TypeScript et CoffeeScript en utilisant des plugins.

Veulent savoir quelle est la node module et pourquoi il n'est pas bien adaptée au navigateur.

article plus utile:

• https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9#.c1q7ao3h4
• http://jamesknelson.com/which-build-system-should-i-use-for-my-javascript-app/
• https://appendto.com/2016/06/the-short-history-of-javascript-module-loaders/

---

pourquoi jspm et SystemJS ?

l'un des principaux objectifs de la modularité ES6 est de la rendre vraiment simple pour installer et utiliser N'importe quelle bibliothèque Javascript Internet ( Github , npm , etc.). Seulement deux choses sont nécessaires:

• Une seule commande pour installer la bibliothèque
• Une seule ligne de code importer la bibliothèque et l'utiliser

donc avec jspm , vous pouvez le faire.

1. installez la bibliothèque avec une commande: jspm install jquery
2. importer la bibliothèque avec une seule ligne de code, pas besoin de référence externe à l'intérieur de votre fichier HTML.

"15191170920 d'affichage".js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");

3. alors vous configurez ces choses dans System.config({ ... }) avant importer votre module. Normalement lors de l'exécution jspm init , il y aura un fichier nommé config.js à cette fin.

4. pour faire tourner ces scripts, nous devons charger system.js et config.js sur la page HTML. Après cela, nous allons charger le fichier display.js en utilisant le chargeur de modules SystemJS .

de l'index.html

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import("scripts/display.js");
</script>

Note: Vous pouvez également utiliser npm avec Webpack comme Angulaire 2 l'a appliqué. Depuis que jspm a été développé pour s'intégrer avec SystemJS et il fonctionne en plus de la source existante npm , donc votre réponse est à vous.

---

3. Task runner

les chemins de tâche et les outils de construction sont principalement des outils en ligne de commande. Pourquoi nous devons les utiliser: en un mot: automation . Le moins de travail que vous avez à faire lors de l'exécution de tâches répétitives comme minification, compilation, unit testing, linting qui nous a précédemment coûté beaucoup de temps à faire avec la ligne de commande ou même manuellement.

• Grunt : vous pouvez créer automatisation pour votre environnement de développement pour pré-traiter des codes ou créer des scripts de construction avec un fichier de configuration et il semble très difficile de gérer une tâche complexe. Populaire dans les dernières années.

chaque tâche de Grunt est un tableau de différentes configurations de plugin, qui sont simplement exécutées l'une après l'autre, de manière strictement indépendante, et séquentielle.

grunt.initConfig({
  clean: {
    src: ['build/app.js', 'build/vendor.js']
  },

  copy: {
    files: [{
      src: 'build/app.js',
      dest: 'build/dist/app.js'
    }]
  }

  concat: {
    'build/app.js': ['build/vendors.js', 'build/app.js']
  }

  // ... other task configurations ...

});

grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);

• Gulp : automatisation comme Grunt mais au lieu de configurations, vous pouvez écrire JavaScript avec des flux comme c'est une application de noeud. Préférez ces jours-ci.

il s'agit d'un exemple de déclaration de tâche Gulp .

//import the necessary gulp plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');

//declare the task
gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

voir plus: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri

---

4. Outils d'échafaudage

• Slush and Yeoman : vous pouvez créer des projets de démarrage avec eux. Par exemple, vous prévoyez de construire un prototype avec HTML et SCSS, puis au lieu de créer manuellement un dossier comme scss, css, img, fonts. Vous pouvez juste installer yeoman et exécuter un script simple. Ensuite, tout est là pour vous.

en savoir plus ici .

npm install -g yo
npm install --global generator-h5bp
yo h5bp

voir plus: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express

---

ma réponse ne correspond pas vraiment au contenu de la question, mais lorsque je cherche ces connaissances sur Google, je vois toujours la question en haut pour que J'ai décidé d'y répondre en résumé. Espérons que vous les gars ont trouvé très utile.

vous pouvez trouver une comparaison technique sur npmcompare

Comparing browserify vs. grunt vs. gulp vs. webpack

Comme vous pouvez le voir webpack est très bien entretenu avec une nouvelle version qui sort tous les 4 jours en moyenne. Mais Gulfp semble avoir la plus grande communauté d'entre eux tous (avec plus de 20k étoiles sur Github) Grunt semble un peu négligé (par rapport aux autres)

So si le besoin de choisir l'un plutôt que l'autre je vais avec Gulfp

OK, ils ont tous des similitudes, ils font les mêmes choses pour vous de différentes façons, je les divise en 3 groupes principaux comme ci-dessous:

---

1) Module bundlers

webpack et browserify comme populaires, fonctionnent comme des coureurs de tâche, mais avec plus de flexibilité, aslo il va tout regrouper comme votre réglage, de sorte que vous pouvez pointer vers le résultat que bundle.js par exemple, dans un seul fichier comprenant le CSS et Javascript, pour plus de détails sur chacun, voir les détails ci-dessous:

webpack

webpack est un module de bundler pour les applications modernes JavaScript. Lorsque webpack traite votre application, il construit récursivement une dépendance graphique qui inclut chaque module dont votre application a besoin, puis les paquets tous ces modules en un petit nombre de paquets-souvent un seul - pour être chargé par le navigateur.

Il est extrêmement configurable, mais pour commencer vous avez seulement besoin de comprendre quatre Concepts de base: entrée, sortie, Chargeurs et plugins.

Ce document est destiné à donner un aperçu de haut niveau de ces concepts, tout en fournissant des liens vers des concepts spécifiques cas d'utilisation.

plus ici

browserify

Browserify est un outil de développement qui permet d'écrire nœud.js-style modules qui compilent pour utilisation dans le navigateur. Tout comme nœud, nous écrire nos modules dans des fichiers séparés, l'exportation de méthodes externes et propriétés utilisant le module.variables relatives aux exportations et aux exportations. Nous pouvons même exiger d'autres modules en utilisant la fonction require, et si nous omettons le chemin relatif se résoudra au module dans le node_modules répertoire.

plus ici

---

2) Tâche les coureurs

gulfp et grunt sont des coureurs de tâches, essentiellement ce qu'ils font, créer des tâches et les exécuter quand vous voulez, par exemple, vous installez un plugin pour minify votre CSS et puis l'exécuter à chaque fois pour faire minifying, plus de détails sur chacun:

gulfp

gulfp.js est un open-source JavaScript toolkit par Fractal Innovations et la communauté open source de GitHub, utilisé comme une construction de streaming système de développement web frontal. C'est une tâche coureur construit sur Nœud.JS et Node Package Manager (npm), utilisés pour l'automatisation de tâches fastidieuses et répétitives impliquées dans le développement web comme minification, concaténation, busting de cache, test d'unité, linting, l'optimisation etc. gulp utilise un approche de la sur configuration des codes définit ses tâches et s'appuie sur ses petits plugins à usage unique pour les réaliser. gulp écosystème a 1000+ ces plugins disponibles pour choisir de.

plus ici

grunt

Grunt est un gestionnaire de tâches JavaScript, un outil utilisé pour automatiquement effectuer des tâches fréquemment utilisées telles que la minification, la compilation, de l'unité de tests, peluchage, etc. Il utilise une interface en ligne de commande pour exécuter personnalisé tâches définies dans un fichier (connu sous le nom Gruntfile). Grunt a été créé par Ben Alman et est écrit en noeud.js. Il est distribué via npm. Actuellement, il y a plus de cinq mille plugins disponibles dans le Grunt de l'écosystème.

plus ici

---

3) les gestionnaires de paquets

les gestionnaires de paquets, ce qu'ils font c'est Gérer les plugins dont vous avez besoin dans votre application et les installer pour vous via github etc en utilisant le paquet.json, très pratique pour mettre à jour vos modules, les installer et partager votre application à travers, plus de détails pour chacun:

mnp

npm est un gestionnaire de paquets pour le langage de programmation JavaScript. Il est le gestionnaire de paquets par défaut pour le JavaScript l'environnement d'exécution Nœud.js. Il se compose d'un client en ligne de commande, également appelé mnp, et un base de données en ligne des paquets publics, appelée le registre npm. Le registre est accessible par le client, et les paquets disponibles peut être consulté et recherché via le site npm.

plus ici

la charmille

Bower peut gérer les composants qui contient HTML, CSS, JavaScript, les polices de caractères ou même des fichiers d'image. Bower ne concaténate pas ou minify code ou faire n'importe quoi d'autre-il installe juste les bonnes versions des paquets vous avez besoin et de leurs dépendances. Pour commencer, Bower fonctionne en récupérant et en installant des paquets depuis partout, en prenant soin de la chasse, trouver, télécharger, et sauver le choses que vous cherchez. Bower garde trace de ces paquets dans un le fichier de manifeste, de la verdure.json.

plus ici

et le plus récent gestionnaire de paquets à ne pas manquer, il est jeune et rapide dans un environnement de travail réel par rapport au npm que j'utilisais la plupart du temps avant, pour réinstaller les modules, il vérifie le dossier node_modules pour vérifier l'existence du module, semble aussi installer les modules prend moins de temps:

fils

fils est un gestionnaire de paquets pour votre code. Il vous permet d'utiliser et le partage de code avec d'autres développeurs du monde entier. Fil fait ceci rapidement, en toute sécurité, et de manière fiable afin que vous n'ayez jamais à vous inquiéter.

Fil vous permet d'utiliser d'autres développeurs de solutions différentes les problèmes, ce qui rend plus facile pour vous de développer votre logiciel. Si vous avez des problèmes, vous pouvez signaler des problèmes ou de contribuer en retour, et lorsque la le problème est résolu, vous pouvez utiliser du Fil pour le maintenir à jour.

Le Code

est partagé par quelque chose appelé un paquet (parfois appelé un module). Un paquet contient tout le code partagé ainsi comme un paquet.fichier json qui décrit le paquet.

plus ici

---

une petite note à propos de npm: npm3 essaie d'installer les dépendances de manière simple

https://docs.npmjs.com/how-npm-works/npm3#npm-v3-dependency-resolution

qu'est-Ce que webpack & webpack-dev-serveur? La documentation officielle dit que c'est un module bundler mais pour moi c'est juste un gestionnaire de tâches. Quelle est la différence?

webpack-dev-server est un serveur web de rechargement en direct que Webpack développeurs utilisent pour obtenir des commentaires immédiats ce qu'ils font. Il ne doit être utilisé que pendant le développement.

Ce projet est fortement inspiré par la nof5 l'unité de l'outil de test.

Webpack comme son nom l'indique, permettra de créer un UNIQUE pack l'âge de la web . Le paquet sera minimisé, et combiné en un seul fichier (nous vivons toujours dans HTTP 1.1 age). Webpack la magie de la combinaison des ressources (JavaScript, CSS, images) et de l'injection comme ceci: <script src="assets/bundle.js"></script> .

il peut aussi être appelé module bundler parce qu'il doit comprendre les dépendances du module, et comment saisir les dépendances et les regrouper.

où utiliseriez-vous browserify? Ne peut-on pas faire la même chose avec node/ES6 imports?

vous pouvez utiliser Browserify sur les mêmes tâches où vous utiliseriez Webpack . – Webpack est plus compact, cependant.

notez que les caractéristiques du ES6 module loader dans Webpack2 utilisent le système .importer , que pas un seul navigateur ne supporte nativement.

quand utiliseriez-vous gulfp/grunt sur npm + plugins?

Vous pouvez oublier Gulp, Grunt, Brokoli, le Brunch et Bower . Utilisez directement les scripts en ligne de commande npm à la place et vous pouvez éliminer les paquets supplémentaires comme ceux-ci ici pour Gulp :

var gulp        = require('gulp'),
  minifyCSS     = require('gulp-minify-css'),
  sass          = require('gulp-sass'),
  browserify    = require('gulp-browserify'),
  uglify        = require('gulp-uglify'),
  rename        = require('gulp-rename'),
  jshint        = require('gulp-jshint'),
  jshintStyle   = require('jshint-stylish'),
  replace       = require('gulp-replace'),
  notify        = require('gulp-notify'),

vous pouvez probablement utiliser Gulfp et Grunt générateurs de fichiers de configuration lors de la création de fichiers de configuration pour votre projet. De cette façon, vous n'avez pas besoin d'installer Yeoman ou des outils similaires.

Yarn est un gestionnaire de paquets récent qui mérite probablement d'être mentionné. Donc, là: https://yarnpkg.com/

Afaik, il peut récupérer à la fois les dépendances npm et bower et a d'autres fonctionnalités appréciées.

StackShare fournit un côte à côte (ou stack up ) de trois outils à la fois.

ici c'est pour npm vs. Bower vs. Browserify et pour gulp vs. Webpack vs. Grunt

sur ces pages de comparaison vous pouvez trouver ce qui suit:

• nombre de voix que chacun a reçues de la communauté StackShare
• qui les entreprises les utilisent dans leur pile de technologies
• niveau d'intérêt pour chaque fil du temps
• pour chaque outil

Webpack est un bundler. Comme Browserfy il regarde dans le codebase pour les requêtes de module ( require ou import ) et les résout récursivement. De plus, vous pouvez configurer Webpack pour résoudre non seulement les modules de type JavaScript, mais aussi CSS, images, HTML, littéralement tout. Ce qui me rend particulièrement enthousiasmé par Webpack , c'est que vous pouvez combiner des modules compilés et chargés dynamiquement dans la même application. Donc obtenir un réel gain de performances, en particulier sur HTTP / 1.x. Comment exactement vous le faites j'ai décrit avec des exemples ici http://dsheiko.com/weblog/state-of-javascript-modules-2017 / Comme alternative pour le bundler on peut penser à Rollup.js ( https://rollupjs.org / ), qui optimise le code lors de la compilation, mais en enlevant tous les morceaux non utilisés trouvés.

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

en outre, je voudrais souligner que npm est souvent utilisé comme un outil d'automatisation comme grunt ou gulp . Vérifier https://docs.npmjs.com/misc/scripts . Pour ma part, je n'utilise que des scripts npm pour éviter les autres outils d'automatisation, même si dans le passé j'étais très intéressé par grunt . Avec d'autres outils, vous devez compter sur d'innombrables plugins pour des paquets, qui souvent ne sont pas bien écrits et ne sont pas activement maintenus. npm connaît ses paquets, donc vous appelez à l'un des paquets installés localement par son nom comme:

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

en fait, vous n'avez généralement pas besoin de plugin si le paquet supporte CLI.