Question NPM vs Bower vs Browserify vs Gulp contre Grunt vs Webpack


J'essaie de résumer mes connaissances sur les gestionnaires de paquets JavaScript, les bundlers et les coureurs de tâches les plus populaires. Corrigez-moi si j'ai tort, s'il-vous plait:

  • npm & bower sont des gestionnaires de paquets. Ils téléchargent simplement les dépendances et ne savent pas comment créer des projets par eux-mêmes. Ce qu'ils savent appeler webpack/gulp/grunt après avoir récupéré toutes les dépendances.
  • bower est comme npm, mais construit des arbres de dépendances aplatis (contrairement à npm qui le fait récursivement). Sens npm récupère les dépendances pour chaque dépendance (peut aller chercher la même chose plusieurs fois), bower s'attend à ce que vous incluiez manuellement les sous-dépendances. parfois bower et npm sont utilisés ensemble pour front-end et back-end respectivement (puisque chaque méga-octet peut être important sur le front-end).
  • grunt et gulp sont des coureurs de tâches pour automatiser tout ce qui peut être automatisé (c.-à-d. compiler CSS / Sass, optimiser les images, créer un ensemble et le réduire / le transplanter).
  • grunt contre. gulp (est comme maven contre. gradle ou configuration par rapport au code). Grunt est basé sur la configuration de tâches indépendantes distinctes, chaque tâche ouvre / gère / ferme le fichier. Gulp nécessite moins de quantité de code et est basé sur les flux de nœuds, ce qui lui permet de construire des chaînes de tuyauterie (sans rouvrir le même fichier) et le rend plus rapide.
  • webpack (webpack-dev-server) - pour moi, c'est un coureur de tâche avec rechargement des changements qui vous permet d'oublier tous les observateurs JS / CSS.
  • npm/bower + plugins peuvent remplacer les coureurs de tâches. Leurs capacités se croisent souvent, donc il y a des implications différentes si vous avez besoin d'utiliser gulp/grunt plus de npm + plugins. Mais les tâches de tâches sont nettement meilleures pour les tâches complexes (par exemple "sur chaque build build bundle, transpile de ES6 à ES5, lancez-le sur tous les émulateurs de navigateurs, faites des captures d'écran et déployez-les dans ftpbox via ftp").
  • browserify permet d'empaqueter des modules de nœuds pour les navigateurs. browserify contre nodede require est en fait AMD vs CommonJS.

Des questions:

  1. Quel est webpack & webpack-dev-server? La documentation officielle indique que c'est un bundler de module mais pour moi c'est juste un coureur de tâche. Quelle est la différence?
  2. Où utiliseriez-vous browserify? Ne pouvons-nous pas faire la même chose avec les importations noeud / ES6? 
  3. Quand utiliseriez-vous gulp/grunt plus de npm + plugins?
  4. Veuillez fournir des exemples lorsque vous devez utiliser une combinaison

1505
2018-01-28 13:28


origine


Réponses:


Webpack et Browserify

Webpack et Browserify font à peu près le même travail, qui est traiter votre code pour être utilisé dans un environnement cible (principalement le navigateur, bien que vous puissiez cibler d'autres environnements comme Node). Le résultat d'un tel traitement est un ou plusieurs liasses - scripts assemblés adaptés à un environnement ciblé.

Par exemple, disons que vous avez écrit un code ES6 divisé en modules et que vous voulez pouvoir l'exécuter dans le navigateur. Si ces modules sont des modules Node, le navigateur ne les comprendra pas puisqu'ils existent uniquement dans l'environnement Node. Les modules ES6 ne fonctionneront pas non plus dans les anciens navigateurs comme IE11. De plus, vous pourriez avoir utilisé des fonctionnalités de langage expérimental (ES propositions suivantes) que les navigateurs n'implémentent pas encore alors l'exécution de ce script ne ferait que renvoyer des erreurs. Ces outils tels que Webpack et Browserify résolvent ces problèmes en traduire un tel code à un navigateur de formulaire est capable d'exécuter. En plus de cela, ils permettent d'appliquer une grande variété d'optimisations sur ces bundles.

Cependant, Webpack et Browserify diffèrent de plusieurs façons, Webpack offre de nombreux outils par défaut (par exemple, le découpage de code), tandis que Browserify ne peut le faire qu'après avoir téléchargé des plugins mais en utilisant les deux conduit à des résultats très similaires. Il s'agit de préférences personnelles (Webpack est plus tendance). Btw, Webpack n'est pas un coureur de tâches, il est juste le processeur de vos fichiers (il les traite par des soi-disant chargeurs et plugins) et il peut être exécuté (entre autres) par un coureur de tâches.


Webpack Dev Serveur

Webpack Dev Server fournit une solution similaire à Browsersync - un serveur de développement où vous pouvez déployer votre application rapidement pendant que vous travaillez dessus, et vérifiez votre progression de développement immédiatement avec le serveur de dev rafraichissant automatiquement le navigateur sur les changements de code sans rechargement avec ce qu'on appelle le remplacement de module chaud.


Runners de tâches vs scripts NPM

J'ai utilisé Gulp pour sa concision et sa facilité d'écriture, mais j'ai découvert plus tard que je n'avais besoin ni de Gulp ni de Grunt. Tout ce dont j'avais besoin aurait pu être fait en utilisant des scripts NPM pour exécuter des outils tiers via leur API. Le choix entre les scripts Gulp, Grunt ou NPM dépend du goût et de l'expérience de votre équipe.

Tandis que les tâches dans Gulp ou Grunt sont faciles à lire, même pour les personnes qui ne connaissent pas bien JS, c'est un autre outil à exiger et à apprendre et je préfère personnellement affiner mes dépendances et simplifier les choses. D'un autre côté, remplacer ces tâches par la combinaison de scripts NPM et de scripts (propablement JS) qui exécutent ces outils tiers (par exemple, la configuration et l'exécution de scripts Node). rimraf à des fins de nettoyage) pourrait être plus difficile. Mais dans la majorité des cas, ces trois sont égaux en termes de résultats.


Exemples

En ce qui concerne les exemples, je suggère que vous jetiez un coup d'oeil à cette Réagissez le projet de démarrage, qui vous montre une belle combinaison de scripts NPM et JS couvrant l'ensemble du processus de construction et de déploiement. Vous pouvez trouver ces scripts NPM dans package.json dans le dossier racine, dans une propriété nommée scripts. Là, vous rencontrerez principalement des commandes comme babel-node tools/run start. Babel-node est un outil CLI (non destiné à la production), qui compile d'abord le fichier ES6 tools/run (fichier run.js situé dans outils) - essentiellement un utilitaire de coureur. Ce coureur prend une fonction en argument et l'exécute, ce qui dans ce cas est start - un autre utilitaire (start.js) chargé de regrouper les fichiers sources (client et serveur) et de démarrer le serveur d'applications et de développement (le serveur de dev deviendra probablement Webpack Dev Server ou Browsersync).

Plus précisément, start.js crée à la fois des bundles côté client et côté serveur, démarre le serveur express et, après un démarrage réussi, se connecte à Browser-sync, qui ressemblait à ceci au moment de l'écriture (cf. réagir projet de démarrage pour le code le plus récent).

const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

      proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

      // no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
}, resolve)

La partie importante est proxy.target, où ils définissent l'adresse du serveur qu'ils veulent proxy, ce qui pourrait être http: // localhost: 3000, et Browsersync démarre un serveur en écoute http: // localhost: 3001, où les ressources générées sont servies avec détection automatique des modifications et remplacement du module chaud. Comme vous pouvez le voir, il existe une autre propriété de configuration files avec des fichiers ou des patterns individuels Browser-sync surveille les changements et recharge le navigateur si certains se produisent, mais comme le dit le commentaire, Webpack se charge de regarder les sources js lui-même avec HMR, donc ils y coopèrent.

Maintenant, je n'ai pas d'exemple équivalent d'une telle configuration de Grunt ou de Gulp, mais avec Gulp (et de façon similaire avec Grunt) vous écrirez des tâches individuelles dans gulpfile.js comme

gulp.task('bundle', function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task('start', function() {
  // starting server and stuff
});

où vous feriez essentiellement à peu près les mêmes choses que dans le kit de démarrage, cette fois avec task runner, qui résout certains problèmes pour vous, mais présente ses propres problèmes et quelques difficultés lors de l'apprentissage de l'utilisation, et comme je le dis, le plus vous avez de dépendances, plus vous pouvez vous tromper. Et c'est la raison pour laquelle j'aime me débarrasser de ces outils.


795
2018-01-28 14:34



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 une meilleure vue d'ensemble.

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

Mise à jour 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 comme ci-dessous.

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


Je suis également à la recherche de cela depuis un certain temps car il y a beaucoup d'outils et chacun d'entre eux nous profite dans un aspect différent. La communauté est divisée en plusieurs outils Browserify, Webpack, jspm, Grunt and Gulp. Vous pourriez également entendre parler de Yeoman or Slush. Ce n'est pas vraiment un problème, c'est juste déroutant pour tout le monde essayant de comprendre une voie claire vers l'avant.

En tout cas, j'aimerais apporter quelque chose.

1. Gestionnaire de paquets 

Les gestionnaires de paquets simplifient l'installation et la 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écompresser les archives, copier des fichiers dans les projets - tout cela est remplacé par quelques commandes dans le terminal.

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

  • Bower: pour la gestion des paquets frontaux, le concept est le même avec NPM. Toutes vos bibliothèques sont stockées dans un fichier nommé bower.json puis courir bower install dans la ligne de commande.

La plus grande différence entre Bower et NPM est que NPM fait imbriqué   arbre de dépendance alors que Bower requiert un arbre de dépendances plat comme ci-dessous.

Citant de Quelle est la difference entre Bower 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

Tonnelle

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 Duplication and Deduplication,   veuillez ouvrir le document pour plus de détails.

  • Yarn: Un nouveau gestionnaire de paquets pour JavaScript  publié par Facebook récemment avec quelques avantages supplémentaires par rapport à NPM. Et avec Yarn, vous pouvez toujours utiliser les deux NPMet 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 SystemJS chargeur de module universel, construit sur le dessus de la dynamique ES6 chargeur de module. Ce n'est pas un gestionnaire de paquets entièrement nouveau avec son propre ensemble de règles, mais il fonctionne plutôt sur les sources de paquets existantes. Hors de la boîte, cela fonctionne avec GitHub et npm. Comme la plupart des Bower paquets basés sont basés sur GitHub, nous pouvons installer les paquets en utilisant jspm ainsi que. Il a un registre qui répertorie la plupart des paquets frontaux couramment utilisés pour une installation plus facile.

Voir les différents entre Bower et jspm:    Gestionnaire de paquets: Bower vs jspm


2. Chargeur de module / groupement

La plupart des projets de toute envergure auront leur code divisé entre un certain nombre de fichiers. Vous pouvez simplement inclure chaque fichier avec un individu <script> tag, cependant, <script> établit une nouvelle connexion http, et pour les petits fichiers - ce qui est un objectif de modularité - le temps de mise en place de la connexion peut prendre beaucoup plus de temps que le transfert des données. Pendant le téléchargement des scripts, 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 simples en un seul fichier, et en le réduisant.

Par exemple

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>
  • La performance vient cependant au détriment de la flexibilité. Si vos modules ont une interdépendance, ce manque de flexibilité peut être un obstacle.

Par exemple

<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 le faire mieux que vous, et c'est pourquoi vous devriez utiliser un outil pour regrouper automatiquement tout dans un seul fichier.

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

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

Par exemple: 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 puis 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 comprendre facilement.    Relation entre CommonJS, AMD et 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 module qu'un bundler de module: Browserify est entièrement un outil de construction, produisant un paquet de code qui peut ensuite être chargé côté client.

Commencez avec une machine de construction sur laquelle node & npm est installé, et récupérez le paquet:

npm install -g –save-dev browserify

Écrivez vos modules dans CommonJSformat

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

Et lorsque vous êtes satisfait, exécutez la commande pour regrouper:

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, dans un seul fichier. Il vous permet également de traiter les fichiers à travers différents types de chargeurs. Vous pourriez écrire votre JavaScript avec CommonJS ou AMD syntaxe des modules. Il attaque le problème de la construction d'une manière fondamentalement plus intégrée et opiniâtre. Dans Browserify tu utilises Gulp/Grunt et une longue liste de transformations et de plugins pour faire le travail. Webpack offre suffisamment de puissance hors de la boîte que vous n'avez généralement pas besoin Grunt ou Gulp du tout.

L'utilisation de base est au-delà simple. Installez Webpack comme Browserify:

npm install -g –save-dev webpack

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

webpack ./entry-point.js bundle-name.js
  • SystemJS: est un chargeur de module peut importer des modules à l'exécution dans l'un des formats populaires utilisé aujourd'hui (CommonJS, UMD, AMD, ES6). Il est construit sur le dessus de la ES6 module chargeur polyfill et est assez intelligent pour détecter le format utilisé et le gérer de manière appropriée. SystemJS peut également transpiler le code ES6 (avec Babel ou Traceur) ou d'autres langues telles que TypeScript et CoffeeScript en utilisant des plugins.

Voulez-vous savoir quel est le node module et pourquoi il n'est pas bien adapté au navigateur.

Article plus utile:


Pourquoi jspm et SystemJS?

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

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

Donc avec jspm, tu peux 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 dans votre fichier HTML.

display.js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");
  1. Ensuite, vous configurez ces choses au sein de System.config({ ... }) avant   importer votre module. Normalement lorsqu'il est exécuté jspm init, il y aura un fichier   nommé config.js dans ce but.

  2. Pour faire fonctionner ces scripts, nous devons charger system.js et config.js sur la page HTML. Après cela, nous chargerons le display.js fichier en utilisant   la 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>

Noté: 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 cela fonctionne au-dessus des existants npm source, donc votre réponse est à vous.


3. Runner de tâche

Les coureurs de tâches et les outils de construction 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 lorsque vous effectuez des tâches répétitives comme minification, compilation, tests unitaires, peluchesce qui nous a déjà coûté beaucoup de temps avec la ligne de commande ou même manuellement.

  • Grunt: Vous pouvez créer une automatisation pour votre environnement de développement afin de pré-traiter les 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 ces dernières années.

Chaque tâche dans Grunt est un tableau de configurations de plugins différentes, qui sont simplement exécutées les unes après les autres, 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: L'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.

C'est un Gulp exemple de déclaration de 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. Outils d'échafaudage

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

Trouve 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 recherche ces connaissances sur Google, je vois toujours la question en haut de la page pour que je décide d'y répondre en résumé. J'espère que vous avez trouvé ça utile.


550
2017-10-03 06:23



Vous pouvez trouver une comparaison technique sur npmcompare

Comparaison de browserify et de 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é (par rapport aux autres)

Donc, si besoin de choisir l'un sur l'autre je voudrais aller avec Gulp


45
2018-05-01 09:04



D'ACCORD, ils ont tous quelques similitudes, ils font les mêmes choses pour vous de manière différente et similaire, je les divise en 3 groupes principaux comme ci-dessous:


1) Faiseurs de modules 

webpack et browserify comme populaires, fonctionnent comme des coureurs de tâches mais avec plus de flexibilité, ils regroupent tout ensemble comme paramètre, ainsi vous pouvez pointer vers le résultat comme bundle.js par exemple dans un seul fichier incluant le CSS et Javascript, pour plus de détails de chacun, regardez les détails ci-dessous:

webpack

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

Il est incroyablement configurable, mais pour commencer, il vous suffit 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

explorer

Browserify est un outil de développement qui nous permet d'écrire node.js-style   modules qui compilent pour une utilisation dans le navigateur. Tout comme le noeud, nous écrivons   nos modules dans des fichiers séparés, l'exportation de méthodes externes et   propriétés à l'aide des variables module.exports et exports. Nous pouvons même   exiger d'autres modules en utilisant la fonction require, et si nous omettons la   chemin relatif, il va résoudre le module dans les node_modules   annuaire.

plus ici


2) Les coureurs de tâches 

Gulp et Grunt sont des coureurs de tâches, essentiellement ce qu'ils font, créer des tâches et les exécuter quand vous le voulez, par exemple vous installez un plugin pour réduire votre CSS et ensuite l'exécuter chaque fois pour faire minime, plus de détails sur chacun:

gorgée

gulp.js est une boîte à outils JavaScript open-source de Fractal Innovations   et la communauté open source de GitHub, utilisée en tant que build de streaming   système dans le développement Web frontal. C'est un coureur de tâche construit sur   Node.js et Node Package Manager (npm), utilisés pour l'automatisation de   tâches chronophages et répétitives impliquées dans le développement web comme   minification, concaténation, effacement de cache, tests unitaires, peluches,   optimisation etc. gulp utilise une approche de code sur-configuration pour   définir ses tâches et s'appuie sur ses petits plugins à usage unique pour   les réaliser. l'écosystème de gulp a plus de 1000 plugins disponibles   à choisir.

plus ici

grognement

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

plus ici


3) Les gestionnaires de paquets 

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

NPM

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

plus ici

tonnelle

Bower peut gérer des composants contenant du code HTML, CSS, JavaScript, des polices   ou même des fichiers d'image. Bower ne concatène pas ou ne réduit pas le code   rien d'autre - il installe juste les bonnes versions des paquets   vous avez besoin et leurs dépendances.   Pour commencer, Bower fonctionne en récupérant et en installant des paquets   partout, en prenant soin de chasser, de trouver, de télécharger et de sauvegarder les   choses que vous cherchez. Bower garde la trace de ces paquets dans un   fichier manifeste, bower.json.

plus ici

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

fil

Yarn est un gestionnaire de paquets pour votre code. Il vous permet d'utiliser et   partager du code avec d'autres développeurs du monde entier. Le fil fait ceci   rapidement, en toute sécurité et de manière fiable pour ne jamais avoir à vous inquiéter.

Yarn vous permet d'utiliser des solutions d'autres développeurs à différents   problèmes, facilitant le développement de votre logiciel. Si vous   avoir des problèmes, vous pouvez signaler des problèmes ou contribuer en retour, et quand le   Le problème est résolu, vous pouvez utiliser Yarn pour tout garder à jour.

Le code est partagé par quelque chose appelé un paquet (parfois référé   en tant que module). Un paquet contient tout le code en cours de partage   comme un fichier package.json qui décrit le paquet.

plus ici



42
2018-05-21 03:43



Une petite note sur npm: npm3 essaie d'installer les dépendances de manière plate

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


40
2018-04-14 15:53



Qu'est-ce que webpack & webpack-dev-server? La documentation officielle indique que c'est un bundler de module mais pour moi c'est juste un coureur de tâche. Quelle est la différence?

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

Ce projet est fortement inspiré par le nof5 outil de test unitaire.

Webpack comme son nom l'indique va créer un UNIQUE  packâge pour la web. Le paquet sera minimisé, et combiné dans un seul fichier (nous vivons encore dans l'ère HTTP 1.1). Webpack fait la magie de combiner les ressources (JavaScript, CSS, images) et de les injecter comme ceci: <script src="assets/bundle.js"></script>.

On peut aussi l'appeler module bundler car il doit comprendre les dépendances des modules, et comment récupérer les dépendances et les regrouper.

Où utiliseriez-vous browserify? Ne pouvons-nous pas faire la même chose avec les importations noeud / ES6?

Vous pourriez utiliser Naviguer sur exactement les mêmes tâches où vous utiliseriez Webpack. - Webpack est plus compact, cependant.

Notez que le Caractéristiques du chargeur de module ES6 dans Webpack2 utilisent System.import, que pas un seul navigateur ne supporte nativement.

Quand utiliseriez-vous gulp / grunt sur npm + plugins?

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

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 Gorgée et Grognement 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.


10
2017-11-22 01:23



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 possède d'autres fonctionnalités appréciées.


9
2017-10-14 15:58