NPM vs Bower vs Browserify vs Gulp vs Grunt vs Webpack

Mise À Jour Octobre 2018

Si vous êtes encore incertain à propos de dev Front-end, pouvez prendre un coup d'oeil rapide est une excellente ressource ici.

https://github.com/kamranahmedse/developer-roadmap

Mise À Jour Juin 2018

D'apprentissage moderne JavaScript 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 cette excellente écrit pour avoir une meilleure vue d'ensemble.

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 complet de Saisir de l'équipe sur la façon d'approcher 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 ce très peu de temps car il y a beaucoup d'outils là-bas, et chacun d'eux des avantages sous un autre aspect. La communauté est divisée à travers des outils comme Browserify, Webpack, jspm, Grunt and Gulp. Vous pourriez aussi entendre parler de Yeoman or Slush. Ce n'est pas vraiment un problème, il est juste confus pour tout le monde essaie de comprendre clairement la voie à suivre.

De toute façon, je voudrais apporter quelque chose.

1. Le Gestionnaire De Package

Les gestionnaires de paquets de simplifier l'installation et la mise à jour des dépendances du projet, qui sont des librairies telles que: jQuery, Bootstrap, etc - tout ce qui est utilisé sur votre site et n'est pas écrite par vous.

De parcourir toute la bibliothèque de sites web, le téléchargement et décompression des archives, la copie de fichiers dans le cadre des projets — tout cela est remplacé par un petit nombre de commandes dans le terminal.

• NPM signifie: Node JS package manager vous aide à gérer toutes les bibliothèques de votre logiciel s'appuie sur. 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êt à l'emploi. Peut être utilisé à la fois pour front-end and back-end bibliothèques.

• Bower: pour le front-end de gestion de paquets, le concept est de même avec les MNP. Tous vos bibliothèques sont stockées dans un fichier nommé bower.json puis exécutez bower install dans la ligne de commande.

La plus grande différence entre Bower et NPM est que les MNP ne imbriquée
l'arbre des dépendances tout en Bower implique un plat de l'arbre des dépendances comme ci-dessous.

Citant Quelle est la différence entre Verdure et npm?

NPM

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

Bower

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 quelques mises à jour sur npm 3 de la Duplication et de la Déduplication,
s'il vous plaît ouvrir le doc pour plus de détails.

• Fil: Un nouveau gestionnaire de paquets pour JavaScript publié par Facebook récemment avec un peu plus d'avantages par rapport à NPM. Et de Fil, vous pouvez toujours utiliser les deux NPMet Bower de registre pour récupérer le colis. Si vous avez installé un paquet avant, yarn crée une copie en cache, ce qui facilite offline package installs.

• jspm: est un gestionnaire de paquet pour le SystemJS universel de chargeur de module, construit sur le haut de la dynamique ES6 chargeur de module. Il n'est pas un tout nouveau gestionnaire de paquets avec son propre ensemble de règles, plutôt qu'il travaille sur de sources de paquets. Hors de la boîte, il fonctionne avec GitHub et npm. Comme la plupart des Bower base de forfaits sont basés sur GitHub, nous pouvons installer les paquets à l'aide de jspm ainsi. Il a un registre qui répertorie les plus couramment utilisés avant la fin de paquets pour faciliter l'installation.

Voir la différence entre Bower et jspm:
Gestionnaire de paquets: Bower vs jspm

---

2. Chargeur De Module/Regroupement

La plupart des projets de toute envergure, ont leur code partagé entre un certain nombre de fichiers. Vous pouvez simplement inclure chaque fichier avec une personne <script> tag, toutefois, <script> établit une nouvelle connexion http, et pour les petits fichiers – qui est un objectif de modularité – le temps de la connexion peut prendre beaucoup plus longtemps que le transfert de données. Alors que les scripts sont en cours de téléchargement, aucun contenu ne peut être modifié sur la page.

• Le problème de temps de téléchargement peut être en grande partie résolu par la concaténation d'un groupe de modules simples en un seul fichier, et minifying il.

E. g

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

• La performance se fait au détriment de la flexibilité mais. Si vos modules inter-dépendance, ce manque de flexibilité peut être un écueil.

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 bundle tout dans un seul fichier.

Ensuite nous avons entendu parler RequireJS, Browserify, Webpack et SystemJS

• RequireJS: est un JavaScript fichier et chargeur de module. Il est optimisé pour le navigateur qu'il utilise, 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, on peut importer myModule.js comme la dépendance et de l'utiliser.

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

Et puis dans notre HTML, nous pouvons nous référer à utiliser avec RequireJS.

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

Lire plus sur CommonJS et AMD pour obtenir la compréhension facilement.
Relation entre CommonJS, AMD et RequireJS?

• Browserify: énoncés pour permettre l'utilisation de CommonJS formaté modules dans le navigateur. Par conséquent, Browserify n'est pas tant un chargeur de module en module bundler: Browserify est entièrement un au moment de la construction de l'outil, la production d'un faisceau de code qui peut ensuite être chargé côté client.

Commencer avec une machine de compilation qui a noeud & npm installé, et obtenir le package:

npm install -g –save-dev browserify

Écrire vos modules dans CommonJS format

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

Et lorsque heureux, émettez la commande de faisceau:

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

Browserify de manière récursive trouve toutes les dépendances de point d'entrée et les assemble en un seul fichier:

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

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

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

npm install -g –save-dev webpack

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

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

• SystemJS: est un module loader peut importer des modules au moment de l'exécution dans l'un des formats populaires utilisé aujourd'hui (CommonJS, UMD, AMD, ES6). Il est construit sur le haut de la ES6 chargeur de module polyfill et est assez intelligent pour détecter le format utilisé et gérer de manière appropriée. SystemJS pouvez également transpile ES6 code (avec Babel ou Traceur) ou d'autres langues telles que le TypeScript et CoffeeScript à l'aide de plugins.

Veux savoir quel est le node module et pourquoi il n'est pas bien adaptée au navigateur.

Plus utile de l'article:

• 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 ES6 la modularité est de le rendre vraiment simple
pour installer et utiliser la bibliothèque Javascript à partir de n'importe où sur la
Internet (Github, npm, etc.). Seules deux choses sont nécessaires:

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

Donc, avec jspm, vous pouvez le faire.

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

display.js

var $ = require('jquery'); 

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

1. Ensuite, vous configurez ces choses à l'intérieur de System.config({ ... }) avant
   l'importation de votre module. Normalement, lorsque vous exécutez jspm init, il y aura un fichier
   nommé config.js à cette fin.

2. De faire ces scripts sont exécutés, nous avons besoin de charger system.js et config.js sur la page HTML. Après cela, nous allons charger le display.js fichier à l'aide de
   le SystemJS chargeur de module.

index.html

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

Noter: Vous pouvez également utiliser npm avec Webpack comme Angulaire 2 l'a appliqué. Depuis jspm a été développé pour intégrer avec SystemJS et il fonctionne sur le dessus de l'existant npm source, de sorte que votre réponse est à vous.

---

3. Task runner

Tâche des coureurs et des outils de développement sont principalement des outils de ligne de commande. Pourquoi nous avons besoin de les utiliser: En un mot: automatisation. Le moins de travail que vous avez à faire lors de l'exécution de tâches répétitives comme minification, la compilation, les tests unitaires, peluchage qui, auparavant, nous a 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 les codes ou de créer des scripts de compilation avec un fichier de config et il semble très difficile de gérer une tâche complexe. Populaire dans les dernières années.

Chaque tâche dans Grunt est un tableau de différents plugin configurations, que tout simplement exécutés l'un après l'autre, dans un strictement indépendant, et de façon 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']);

• Trait: Automatisation comme Grunt mais au lieu de configurations, vous pouvez écrire JavaScript avec des cours d'eau, c'est un nœud de l'application. Préférez ces jours-ci.

C'est un Gulp exemple de déclaration de la tâche.

//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. Échafaudage outils

• Slush and Yeoman: Vous pouvez créer starter avec eux des projets. Par exemple, vous envisagez de construire un prototype avec HTML et SCSS, alors au lieu de créer manuellement un dossier comme scss, css, img, des polices. Vous pouvez simplement installer yeoman et exécuter un script simple. Ensuite, tout est là pour vous.

Trouver plus de 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 n'est pas vraiment mis en correspondance avec le contenu de la question, mais quand je suis à la recherche de ces connaissances sur Google, je vois toujours la question sur le dessus, de sorte 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 des techniques de comparaison sur npmcompare

La comparaison de 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 Gulp semble avoir la plus grande communauté de tous (avec plus de 20K étoiles sur Github)
Grunt semble un peu négligée (par rapport aux autres)

Donc si besoin de choisir l'un sur l'autre, j'irais avec Gulp

Fil récent est un gestionnaire de paquets qui mérite sans doute d'être mentionné. Donc, il y a : https://yarnpkg.com/

Autant que je sache, il peut aller chercher les deux mnp et bower dépendances et a apprécié autres fonctionnalités.

Webpack est un bundler. Comme Browserfy il se regarde dans le code de base pour le module de requêtes (require ou import) et les résout de manière récursive. Ce qui est plus, vous pouvez configurer Webpack pour résoudre non seulement le JavaScript comme les modules, mais CSS, images, HTML, littéralement tout. Qu'est-ce surtout me rend heureux au sujet de Webpack, vous pouvez combiner les deux compilés et les modules chargés dynamiquement dans la même application. Donc obtenir un réel gain de performances, en particulier sur HTTP/1.x. Exactement comment vous vous le faites que j'ai décrit avec des exemples ici http://dsheiko.com/weblog/state-of-javascript-modules-2017/
Comme une alternative de bundler l'on peut penser de Rollup.js (https://rollupjs.org/), ce qui optimise le code lors de la compilation, mais le décapage des morceaux inutilisés.

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

D'ailleurs, je tiens à souligner que npm est souvent utilisé comme une automatisation de l'outil comme grunt ou gulp. Découvrez https://docs.npmjs.com/misc/scripts. Personnellement, je aller maintenant avec npm scripts uniquement pour éviter d'autres outils d'automatisation, bien que dans le passé, j'ai été très bien dans grunt. Avec d'autres outils que vous devez compter sur de nombreux plugins pour les paquets, qui ne sont souvent pas à l'écrit et de ne pas être activement maintenu. npm sait que ses paquets, si vous appelez à l'un de localement des paquets installés par un nom comme:

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

En fait, vous ne ont pas besoin de plugin si le package prend en charge la CLI.