it-swarm.com.de

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

Ich versuche, mein Wissen über die beliebtesten JavaScript-Paketmanager, -Bündler und -Aufgabenläufer zusammenzufassen. Bitte korrigiere mich wenn ich falsch liege:

  • npm & bower sind Paketmanager. Sie laden nur die Abhängigkeiten herunter und wissen nicht, wie sie Projekte selbst erstellen sollen. Sie wissen, dass sie webpack/gulp/grunt aufrufen müssen, nachdem sie alle Abhängigkeiten abgerufen haben.
  • bower ist wie npm, erstellt jedoch abgeflachte Abhängigkeitsbäume (im Gegensatz zu npm, die dies rekursiv tun). Bedeutung npm ruft die Abhängigkeiten für jede Abhängigkeit ab (kann sie einige Male abrufen), während bower erwartet, dass Sie Unterabhängigkeiten manuell einbeziehen. Manchmal werden bower und npm zusammen für das Front-End bzw. das Back-End verwendet (da jedes Megabyte im Front-End von Bedeutung sein kann).
  • grunt und gulp sind Task-Läufer, die alles automatisieren, was automatisiert werden kann (d. H. CSS/Sass kompilieren, Bilder optimieren, ein Bündel erstellen und es minimieren/transpilieren).
  • grunt vs. gulp (entspricht maven vs. gradle oder Konfiguration vs. Code). Grunt basiert auf der Konfiguration separater unabhängiger Aufgaben. Jede Aufgabe öffnet/handhabt/schließt eine Datei. Gulp benötigt weniger Code und basiert auf Node-Streams, wodurch es möglich ist, Pipe-Ketten zu erstellen (ohne die gleiche Datei erneut zu öffnen) und diese schneller zu machen.
  • webpack (webpack-dev-server) - für mich ist es ein Task Runner mit heißem Nachladen von Änderungen, mit dem Sie alle JS/CSS-Beobachter vergessen können.
  • npm/bower + Plugins können Task-Läufer ersetzen. Ihre Fähigkeiten überschneiden sich häufig, sodass es unterschiedliche Auswirkungen gibt, wenn Sie gulp/grunt über npm + Plugins verwenden müssen. Task-Läufer sind jedoch definitiv besser für komplexe Aufgaben geeignet (z. B. "Bei jedem Build Bundle erstellen, von ES6 auf ES5 transpilieren, auf allen Browser-Emulatoren ausführen, Screenshots erstellen und auf Dropbox über FTP bereitstellen").
  • browserify ermöglicht das Packen von Knotenmodulen für Browser. browserify vs node 's require ist eigentlich AMD vs CommonJS .

Fragen:

  1. Was ist webpack & webpack-dev-server? Die offizielle Dokumentation sagt, es ist ein Modulbündler, aber für mich ist es nur ein Task Runner. Was ist der Unterschied?
  2. Wo würden Sie browserify verwenden? Können wir nicht dasselbe mit Node/ES6-Importen machen?
  3. Wann würden Sie gulp/grunt über npm + Plugins verwenden?
  4. Bitte geben Sie Beispiele an, wenn Sie eine Kombination verwenden möchten
1771
VB_

Webpack und Browserify

Webpack und Browserify erledigen so ziemlich den gleichen Job: Sie verarbeiten Ihren Code, um ihn in einer Zielumgebung zu verwenden (hauptsächlich Browser, obwohl Sie auch andere Umgebungen wie Node als Ziel verwenden können). Das Ergebnis einer solchen Verarbeitung ist ein oder mehrere Bundles - zusammengestellte Skripte, die für die Zielumgebung geeignet sind.

Angenommen, Sie haben einen ES6-Code geschrieben, der in Module unterteilt ist, und möchten ihn im Browser ausführen können. Wenn diese Module Node Module sind, werden sie vom Browser nicht verstanden, da sie nur in der Node Umgebung vorhanden sind. ES6-Module funktionieren auch in älteren Browsern wie IE11 nicht. Darüber hinaus haben Sie möglicherweise experimentelle Sprachfunktionen (ES Next Proposals) verwendet, die von Browsern noch nicht implementiert wurden, sodass das Ausführen eines solchen Skripts nur Fehler verursacht. Tools wie Webpack und Browserify lösen diese Probleme, indem sie solchen Code in einen Formular-Browser übersetzen, der ausgeführt werden kann . Darüber hinaus ermöglichen sie eine Vielzahl von Optimierungen für diese Bundles.

Webpack und Browserify unterscheiden sich jedoch in vielerlei Hinsicht. Standardmäßig bietet Webpack viele Tools (z. B. Code-Aufteilung), während Browserify dies nur nach dem Herunterladen von Plugins ausführen kann. Die Verwendung von führt jedoch zu sehr ähnlichen Ergebnissen . Es kommt auf die persönlichen Vorlieben an (Webpack ist trendiger). Übrigens, Webpack ist kein Task-Runner, es ist nur ein Prozessor Ihrer Dateien (es verarbeitet sie durch sogenannte Loader und Plugins) und es kann (unter anderem) von einem Task-Runner ausgeführt werden.


Webpack Dev Server

Webpack Dev Server bietet eine ähnliche Lösung wie Browsersync - ein Entwicklungsserver, mit dem Sie Ihre App während der Arbeit schnell bereitstellen und Ihren Entwicklungsfortschritt sofort überprüfen können. Der Entwicklungsserver aktualisiert den Browser automatisch bei Codeänderungen oder überträgt sogar geänderten Code an den Browser ohne nachladen mit so genannten hot modul austausch.


Task-Läufer gegen NPM-Skripte

Ich habe Gulp wegen seiner Prägnanz und einfachen Aufgabenstellung verwendet, habe aber später herausgefunden, dass ich überhaupt weder Gulp noch Grunt benötige. Alles, was ich jemals gebraucht habe, hätte mit NPM-Skripten geschehen können, um Tools von Drittanbietern über deren API auszuführen. Die Wahl zwischen Gulp-, Grunt- oder NPM-Skripten hängt vom Geschmack und der Erfahrung Ihres Teams ab.

Während Aufgaben in Gulp oder Grunt auch für Leute, die mit JS nicht so vertraut sind, leicht zu lesen sind, ist es ein weiteres Werkzeug, das man benötigt und lernt, und ich persönlich bevorzuge es, meine Abhängigkeiten einzugrenzen und die Dinge zu vereinfachen. Ersetzen Sie diese Aufgaben andererseits durch die Kombination von NPM-Skripten und (wahrscheinlich JS-) Skripten, die die Tools von Drittanbietern ausführen (z. B. Node Skriptkonfiguration und Ausführung rimraf zur Bereinigung Zwecke) könnte schwieriger sein. In den meisten Fällen sind diese drei jedoch hinsichtlich der Ergebnisse gleich .


Beispiele

Für die Beispiele schlage ich vor, Sie werfen einen Blick auf dieses React starter project , das Ihnen eine nette Kombination von NPM- und JS-Skripten zeigt, die den gesamten Erstellungs- und Bereitstellungsprozess abdecken. Sie finden diese NPM-Skripte in package.json im Stammordner in einer Eigenschaft namens scripts. Dort treffen Sie meist auf Befehle wie babel-node tools/run start. Babel-node ist ein CLI-Tool (nicht für Produktionszwecke gedacht), das zunächst die ES6-Datei tools/run (run.js-Datei in tools ) kompiliert - im Grunde genommen ein Runner-Dienstprogramm. Dieser Runner nimmt eine Funktion als Argument und führt sie aus. In diesem Fall handelt es sich um start - ein anderes Dienstprogramm (start.js), das für das Bündeln von Quelldateien (sowohl Client als auch Server) und das Starten der Anwendung und des Entwicklungsservers (the Dev Server wird wahrscheinlich entweder Webpack Dev Server oder Browsersync sein.

Genauer gesagt, start.js erstellt sowohl Client- als auch Server-seitige Bundles, startet den Express-Server und startet nach erfolgreichem Start die Browsersynchronisation, die zum Zeitpunkt des Schreibens so aussah (siehe Startprojekt reagieren für den neuesten Code).

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)

Der wichtige Teil ist proxy.target, in dem die Serveradresse festgelegt wird, für die ein Proxy erstellt werden soll. Dies kann http: // localhost: 30 sein, und Browsersync startet einen abhörenden Server http : // localhost: 3001 , wobei die generierten Assets mit automatischer Änderungserkennung und Hot-Module-Austausch bedient werden. Wie Sie sehen, gibt es eine andere Konfigurationseigenschaft files mit einzelnen Dateien oder Mustern. Die Browsersynchronisierung überwacht Änderungen und lädt den Browser neu, wenn einige auftreten. Wie der Kommentar besagt, kümmert sich Webpack darum, die js-Quellen selbst zu überwachen HMR, also kooperieren sie dort.

Jetzt habe ich kein äquivalentes Beispiel für eine solche Grunt- oder Gulp-Konfiguration, aber mit Gulp (und etwas ähnlich mit Grunt) würden Sie einzelne Aufgaben in gulpfile.js wie schreiben

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

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

wo du im wesentlichen die gleichen Dinge tun würdest wie im Starter-Kit, diesmal mit dem Task-Runner, der einige Probleme für dich löst, aber seine eigenen Probleme und einige Schwierigkeiten beim Erlernen des Gebrauchs und, wie ich sage, des Je mehr Abhängigkeiten Sie haben, desto mehr kann schief gehen. Und das ist der Grund, warum ich solche Werkzeuge gerne loswird.

948
Dan Macák

Update Oktober 2018

Wenn Sie immer noch unsicher sind, was Front-End-Entwickler angeht, können Sie hier einen kurzen Blick auf eine hervorragende Ressource werfen.

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

Update Juni 2018

Das Erlernen des modernen JavaScript ist schwierig, wenn Sie von Anfang an nicht dabei waren. Wenn Sie der Neuankömmling sind, denken Sie daran, diese ausgezeichnete schriftliche zu überprüfen, um einen besseren Überblick zu haben.

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

Update Juli 2017

Kürzlich habe ich eine wirklich umfassende Anleitung vom Grab-Team gefunden, wie man sich der Front-End-Entwicklung im Jahr 2017 nähert.

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


Ich habe auch schon seit einiger Zeit danach gesucht, da es viele Tools gibt, von denen jedes in einem anderen Aspekt von Nutzen ist. Die Community ist auf Tools wie Browserify, Webpack, jspm, Grunt and Gulp aufgeteilt. Möglicherweise erfahren Sie auch etwas über Yeoman or Slush. Das ist nicht wirklich ein Problem, es ist nur verwirrend für alle, die versuchen, einen klaren Weg nach vorne zu verstehen.

Jedenfalls möchte ich etwas beitragen.

1. Paketmanager

Paketmanager vereinfachen das Installieren und Aktualisieren von Projektabhängigkeiten. Hierbei handelt es sich um folgende Bibliotheken: jQuery, Bootstrap etc - alles, was auf Ihrer Site verwendet wird und nicht von Ihnen geschrieben wurde.

Durchsuchen aller Bibliotheks-Websites, Herunterladen und Entpacken der Archive, Kopieren von Dateien in die Projekte - all dies wird durch einige Befehle im Terminal ersetzt.

  • NPM steht für: Node JS package manager hilft Ihnen bei der Verwaltung aller Bibliotheken, auf die sich Ihre Software stützt. Sie definieren Ihre Anforderungen in einer Datei mit dem Namen package.json und führen npm install in der Befehlszeile aus. Dann sind Ihre Pakete heruntergeladen und einsatzbereit. Kann sowohl für front-end and back-end-Bibliotheken verwendet werden.

  • Bower : Für die Front-End-Paketverwaltung gilt dasselbe Konzept wie für NPM. Alle Ihre Bibliotheken werden in einer Datei mit dem Namen bower.json gespeichert und führen dann bower install in der Befehlszeile aus.

Der größte Unterschied zwischen Bower und NPM besteht darin, dass NPM einen verschachtelten Abhängigkeitsbaum ausführt, während Bower einen flachen Abhängigkeitsbaum wie folgt benötigt.

Zitat aus Was ist der Unterschied zwischen Bower und 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

Es gibt einige Updates für npm 3 Duplication and Deduplication , bitte öffnen Sie das Dokument für weitere Details.

  • Yarn : Ein neuer Paketmanager für JavaScriptveröffentlicht von Facebook mit einigen weiteren Vorteilen gegenüber NPM. Und mit Yarn können Sie immer noch die Registrierung NPM und Bower verwenden, um das Paket abzurufen. Wenn Sie bereits ein Paket installiert haben, erstellt yarn eine zwischengespeicherte Kopie, die offline package installs erleichtert.

  • jspm : ist ein Paketmanager für den universellen Modullader SystemJS, der auf dem dynamischen Modullader ES6 aufbaut. Es handelt sich nicht um einen völlig neuen Paketmanager mit eigenen Regeln, sondern er arbeitet auf vorhandenen Paketquellen. Standardmäßig funktioniert es mit GitHub und npm. Da die meisten Bower-basierten Pakete auf GitHub basieren, können wir diese Pakete auch mit jspm installieren. Es verfügt über eine Registrierung, in der die meisten häufig verwendeten Front-End-Pakete für eine einfachere Installation aufgelistet sind.

Siehe den Unterschied zwischen Bower und jspm: Package Manager: Bower vs jspm


2. Module Loader/Bundling

Bei den meisten Projekten jeder Größenordnung wird der Code auf mehrere Dateien aufgeteilt. Sie können einfach jede Datei mit einem individuellen <script> -Tag versehen. <script> stellt jedoch eine neue http-Verbindung her. Bei kleinen Dateien - ein Ziel der Modularität - kann der Verbindungsaufbau erheblich länger dauern als die Übertragung der Daten. Während die Skripte heruntergeladen werden, kann kein Inhalt auf der Seite geändert werden.

  • Das Problem der Download-Zeit kann weitgehend gelöst werden, indem eine Gruppe einfacher Module zu einer einzigen Datei zusammengefasst und minimiert wird.

Z.B

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>
  • Die Leistung geht jedoch zu Lasten der Flexibilität. Wenn Ihre Module gegenseitig abhängig sind, kann diese mangelnde Flexibilität ein Showstopper sein.

Z.B

<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>

Computer können das besser als Sie. Aus diesem Grund sollten Sie ein Tool verwenden, um alles automatisch in einer einzigen Datei zu bündeln.

Dann hörten wir von RequireJS, Browserify, Webpack und SystemJS

  • RequireJS : ist ein JavaScript-Datei- und Modullader. Es ist für die Verwendung im Browser optimiert, kann jedoch auch in anderen JavaScript-Umgebungen wie Node verwendet werden.

Zum Beispiel: 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
    }
});

In main.js können wir myModule.js als Abhängigkeit importieren und verwenden.

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

Und dann können wir in unserem HTML auf die Verwendung mit RequireJS verweisen.

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

Lesen Sie mehr über CommonJS und AMD, um sich leicht verständlich zu machen. Beziehung zwischen CommonJS, AMD und RequireJS?

  • Browserify : Legen Sie fest, dass CommonJS-formatierte Module im Browser verwendet werden dürfen. Folglich ist Browserify weniger ein Modullader als ein Modulbündler: Browserify ist ein reines Build-Time-Tool, das ein Codebündel erstellt, das dann clientseitig geladen werden kann.

Beginnen Sie mit einer Build-Maschine, auf der Node & Npm installiert ist, und holen Sie sich das Paket:

npm install -g –save-dev browserify

Schreiben Sie Ihre Module im Format CommonJS

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

Wenn Sie zufrieden sind, geben Sie den Befehl zum Bündeln ein:

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

Browserify findet rekursiv alle Abhängigkeiten des Einstiegspunkts und fügt sie zu einer einzigen Datei zusammen:

<script src=”bundle-name.js”></script>
  • Webpack : Es bündelt alle Ihre statischen Assets, einschließlich JavaScript, Bilder, CSS und mehr, in einer einzigen Datei. Sie können die Dateien auch über verschiedene Arten von Ladern verarbeiten. Sie können Ihre JavaScript mit der CommonJS- oder der AMD-Modulsyntax schreiben. Es greift das Build-Problem grundlegend integrierter und unvoreingenommener an. In Browserify verwenden Sie Gulp/Grunt und eine lange Liste von Transformationen und Plugins, um die Aufgabe zu erledigen. Webpack bietet im Auslieferungszustand genügend Strom, sodass Sie normalerweise Grunt oder Gulp überhaupt nicht benötigen.

Die grundlegende Verwendung ist nicht einfach. Installieren Sie Webpack wie Browserify:

npm install -g –save-dev webpack

Und übergeben Sie dem Befehl einen Einstiegspunkt und eine Ausgabedatei:

webpack ./entry-point.js bundle-name.js
  • SystemJS : ist ein Modulladeprogramm, mit dem Module zur Laufzeit in allen gängigen Formaten importiert werden können (CommonJS, UMD, AMD, ES6). Es basiert auf dem Modul-Loader ES6 polyfill und ist intelligent genug, um das verwendete Format zu erkennen und es entsprechend zu handhaben. SystemJS kann auch ES6-Code (mit Babel oder Traceur) oder andere Sprachen wie TypeScript und CoffeeScript mithilfe von Plugins transpilieren.

Möchten Sie wissen, was der node module ist und warum er nicht gut an den Browser angepasst ist?.

Nützlicherer Artikel:


Warum jspm und SystemJS?

Eines der Hauptziele der Modularität von ES6 besteht darin, die Installation und Verwendung einer beliebigen Javascript-Bibliothek von einem beliebigen Ort im Internet aus (Github, npm usw.) zu vereinfachen. Es werden nur zwei Dinge benötigt:

  • Ein einzelner Befehl zum Installieren der Bibliothek
  • Eine einzige Codezeile, um die Bibliothek zu importieren und zu verwenden

Mit jspm können Sie es also tun.

  1. Installieren Sie die Bibliothek mit einem Befehl: jspm install jquery
  2. Importieren Sie die Bibliothek mit einer einzigen Codezeile, ohne dass Sie in Ihrer HTML-Datei einen externen Verweis benötigen.

display.js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");
  1. Dann konfigurieren Sie diese Dinge in System.config({ ... }), bevor Sie Ihr Modul importieren. Normalerweise gibt es beim Ausführen von jspm init eine Datei mit dem Namen config.js für diesen Zweck.

  2. Damit diese Skripte ausgeführt werden, müssen system.js und config.js auf der HTML-Seite geladen werden. Danach laden wir die Datei display.js mit dem Modul-Loader SystemJS.

index.html

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

Hinweis: Sie können npm auch mit Webpack verwenden, da Angular 2 es angewendet hat. Da jspm für die Integration mit SystemJS entwickelt wurde und auf der vorhandenen npm-Quelle basiert, liegt Ihre Antwort bei Ihnen.


3. Task Runner

Task-Läufer und Build-Tools sind in erster Linie Befehlszeilen-Tools. Warum müssen wir sie verwenden: In einem Wort: Automatisierung . Je weniger Arbeit Sie für sich wiederholende Aufgaben wie Minimieren, Kompilieren, Testen von Einheiten und Flusen aufwenden müssen, umso mehr Zeit haben wir bisher mit Befehlen zu tun Linie oder sogar manuell.

  • Grunt : Sie können eine Automatisierung für Ihre Entwicklungsumgebung erstellen, um Codes vorab zu verarbeiten oder Build-Skripte mit einer Konfigurationsdatei zu erstellen, und es scheint sehr schwierig, eine komplexe Aufgabe zu bewältigen. Beliebt in den letzten Jahren.

Jede Aufgabe in Grunt besteht aus einer Reihe unterschiedlicher Plugin-Konfigurationen, die einfach nacheinander streng unabhängig und sequentiell ausgeführt werden.

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 : Automatisierung wie Grunt, aber anstelle von Konfigurationen können Sie JavaScript mit Streams schreiben, als wäre es eine Knotenanwendung. Ich bevorzuge diese Tage.

Dies ist eine Gulp-Beispieltaskdeklaration.

//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);
});

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


4. Gerüstwerkzeuge

  • Slush and Yeoman: Mit ihnen können Sie Starterprojekte erstellen. Sie planen beispielsweise, einen Prototyp mit HTML und SCSS zu erstellen, und dann manuell Ordner wie scss, css, img und fonts zu erstellen. Sie können einfach yeoman installieren und ein einfaches Skript ausführen. Dann alles hier für dich.

Finden Sie mehr hier .

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

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


Meine Antwort stimmt nicht wirklich mit dem Inhalt der Frage überein, aber wenn ich auf Google nach diesen Informationen suche, wird die Frage immer oben angezeigt, sodass ich mich entschlossen habe, sie zusammenfassend zu beantworten. Hoffe ihr findet es hilfreich.

639
trungk18

Sie finden einige technische Vergleiche unter npmcompare

Vergleich von browserify vs. grunt vs. gulp vs. webpack

Wie Sie sehen, ist das Webpack sehr gut gewartet und es erscheint durchschnittlich alle 4 Tage eine neue Version. Aber Gulp scheint die größte Community von allen zu haben (mit über 20.000 Sternen auf Github). Grunt scheint etwas vernachlässigt (im Vergleich zu den anderen).

Also, wenn Sie eine über die andere wählen müssen, würde ich mit Gulp gehen

49
dcohenb

Ein kleiner Hinweis zu npm: npm3 versucht, Abhängigkeiten einfach zu installieren

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

41
DeadWoroz

Yarn ist ein neuer Paketmanager, der es wahrscheinlich verdient, erwähnt zu werden. Also, dort: https://yarnpkg.com/

Afaik, es kann sowohl Npm- als auch Bower-Abhängigkeiten abrufen und hat andere geschätzte Funktionen.

12
Ellone

Was ist Webpack & Webpack-Dev-Server? Offizielle Dokumentation sagt, es ist ein Modulbündler, aber für mich ist es nur ein Task Runner. Was ist der Unterschied?

webpack-dev-server ist ein Live-Reloading-Webserver, mit dem Webpack Entwickler sofort Feedback zu ihren Aktionen erhalten. Es sollte nur während der Entwicklung verwendet werden.

Dieses Projekt ist stark vom Unit-Test-Tool nof5 inspiriert.

Webpack Wie der Name schon sagt, wird ein SINGLE Pack Alter für das Web . Das Paket wird minimiert und in einer einzigen Datei zusammengefasst (wir leben immer noch im HTTP 1.1-Alter). Webpack kombiniert die Ressourcen (JavaScript, CSS, Bilder) auf magische Weise und fügt sie folgendermaßen ein: <script src="assets/bundle.js"></script>.

Es kann auch Modulbündler genannt werden, da es die Modulabhängigkeiten verstehen muss und wissen muss, wie man die Abhängigkeiten erfasst und zusammenbündelt.

Wo würden Sie browserify verwenden? Können wir nicht dasselbe mit Node/ES6-Importen machen?

Sie könnten Browserify für genau dieselben Aufgaben verwenden, für die Sie Webpack verwenden würden. - Webpack ist jedoch kompakter.

Beachten Sie, dass die Funktionen ES6-Modullader in Webpack2System.import ​​verwenden, die von keinem einzelnen Browser nativ unterstützt werden.

Wann würdest du gulp/grunt over npm + plugins verwenden?

Sie können vergessenGulp, Grunzen, Brokoli, Brunch und Bower. Verwenden Sie stattdessen direkt npm-Befehlszeilenskripte, und Sie können hier zusätzliche Pakete für Gulp entfernen:

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'),

Sie können wahrscheinlich Gulp und Grunt ​​Konfigurationsdateigeneratoren verwenden, wenn Sie Konfigurationsdateien für Ihr Projekt erstellen. Auf diese Weise müssen Sie nicht Yeoman oder ähnliche Tools installieren.

12
prosti

Webpack ist ein Bündler. Wie Browserfy sucht es in der Codebasis nach Modulanforderungen (require oder import) und löst sie rekursiv auf. Darüber hinaus können Sie Webpack so konfigurieren, dass nicht nur JavaScript-ähnliche Module aufgelöst werden, sondern auch CSS, Bilder, HTML und buchstäblich alles. Was mich besonders an Webpack begeistert, ist, dass Sie kompilierte und dynamisch geladene Module in derselben App kombinieren können. Dadurch bekommt man einen echten Performance-Schub, insbesondere über HTTP/1.x. Wie genau du es tust, habe ich hier mit Beispielen beschrieben http://dsheiko.com/weblog/state-of-javascript-modules-2017/ Als Alternative für Bundler kann man sich Rollup.js vorstellen (- https://rollupjs.org/ ), wodurch der Code während der Kompilierung optimiert wird, aber alle gefundenen unbenutzten Chunks entfernt werden.

Für AMD kann anstelle von RequireJS der native ES2016 module system verwendet werden, der jedoch mit System.js geladen wird ( https://github.com/systemjs/systemjs )

Außerdem würde ich darauf hinweisen, dass npm häufig als Automatisierungswerkzeug verwendet wird, wie grunt oder gulp. Check out https://docs.npmjs.com/misc/scripts . Ich persönlich gehe jetzt mit npm-Skripten vor und vermeide nur andere Automatisierungstools, obwohl ich in der Vergangenheit sehr auf grunt stehe. Bei anderen Tools muss man sich auf unzählige Plugins für Pakete verlassen, die oft nicht gut geschrieben sind und nicht aktiv gepflegt werden. npm kennt seine Pakete, daher rufen Sie eines der lokal installierten Pakete mit folgendem Namen auf:

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

Eigentlich benötigen Sie in der Regel kein Plugin, wenn das Paket CLI unterstützt.

9
Dmitry Sheiko