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

Ich versuche, mein Wissen über die beliebtesten JavaScript-Paketmanager, Bundler und Task-Runner zusammenzufassen. Bitte korrigiere mich wenn ich falsch liege:

• npm& bowersind Paketmanager. Sie laden nur die Abhängigkeiten herunter und wissen nicht, wie sie Projekte selbst erstellen sollen. Was sie wissen , ist zu nennen webpack/ gulp/ gruntnach alle Abhängigkeiten zu holen.
• bowerist wie npm, baut aber einen abgeflachten Abhängigkeitsbaum auf (im Gegensatz zu dem, npmwas es rekursiv tut). Bedeutung npmholt die Abhängigkeiten für jede Abhängigkeit (das gleiche ein paar Mal holen), während bowererwartet Sie manuell Unter Abhängigkeiten enthalten. Manchmal bowerund npmwerden zusammen für Front-End bzw. Back-End verwendet (da jedes Megabyte im Front-End von Bedeutung sein kann).
• gruntund gulpsind Task-Läufer, um alles zu automatisieren, was automatisiert werden kann (dh CSS / Sass kompilieren, Bilder optimieren, ein Bündel erstellen und es minimieren / transpilieren).
• gruntvs. gulp(ist wie mavenvs. gradleoder Konfiguration vs. Code). Grunt basiert auf der Konfiguration separater unabhängiger Aufgaben. Jede Aufgabe öffnet / verarbeitet / schließt eine Datei. Gulp benötigt weniger Code und basiert auf Node-Streams, wodurch es Pipe-Ketten erstellen kann (ohne dieselbe Datei erneut zu öffnen) und schneller wird.
• 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 Runner ersetzen. Ihre Fähigkeiten überschneiden sich häufig, sodass es unterschiedliche Auswirkungen gibt, wenn Sie gulp/ gruntover npm+ -Plugins verwenden müssen. Task-Läufer eignen sich jedoch definitiv besser für komplexe Aufgaben (z. B. "Erstellen Sie bei jedem Build ein Bundle, transpilieren Sie es von ES6 auf ES5, führen Sie es in allen Browser-Emulatoren aus, erstellen Sie Screenshots und stellen Sie es über FTP für Dropbox bereit").
• browserifyErmöglicht das Packen von Knotenmodulen für Browser. browserifyvs node's requireist eigentlich AMD vs CommonJS .

Fragen:

1. Was ist webpack& webpack-dev-server? Offizielle Dokumentation besagt, dass es ein Modulbündler ist, aber für mich ist es nur ein Task Runner. Was ist der Unterschied?
2. Wo würdest du verwenden browserify? Können wir das nicht auch mit Node / ES6-Importen machen?
3. Wann würden Sie gulp/ gruntover npm+ Plugins verwenden?
4. Bitte geben Sie Beispiele an, wenn Sie eine Kombination verwenden müssen

Webpack und Browserify

Webpack und Browserify erledigen fast den gleichen Job, bei dem Ihr Code für die Verwendung in einer Zielumgebung verarbeitet wird (hauptsächlich Browser, obwohl Sie auch auf andere Umgebungen wie Node abzielen können). Das Ergebnis einer solchen Verarbeitung sind ein oder mehrere Bündel - zusammengestellte Skripte, die für eine bestimmte Umgebung geeignet sind.

Angenommen, Sie haben ES6-Code geschrieben, der in Module unterteilt ist, und möchten ihn in einem Browser ausführen können. Wenn diese Module Knotenmodule sind, versteht der Browser sie nicht, da sie nur in der Knotenumgebung vorhanden sind. ES6-Module funktionieren auch in älteren Browsern wie IE11 nicht. Darüber hinaus haben Sie möglicherweise experimentelle Sprachfunktionen verwendet (nächste ES-Vorschläge), die Browser noch nicht implementiert haben, sodass das Ausführen eines solchen Skripts nur zu Fehlern führen würde. Tools wie Webpack und Browserify lösen diese Probleme, indem sie solchen Code in ein Formular übersetzen, das ein Browser ausführen kann . Darüber hinaus ermöglichen sie eine Vielzahl von Optimierungen für diese Bundles.

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

Webpack Dev Server

Webpack Dev Server bietet eine ähnliche Lösung wie Browsersync - einen Entwicklungsserver, auf 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 gibt sogar geänderten Code weiter zum Browser ohne Nachladen mit sogenanntem Hot Module Replacement.

Task Runner gegen NPM-Skripte

Ich habe Gulp für seine Prägnanz und das einfache Schreiben von Aufgaben verwendet, aber später herausgefunden, dass ich weder Gulp noch Grunt brauche. Alles, was ich jemals gebraucht habe, hätte mit NPM-Skripten durchgeführt werden 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 selbst für Leute, die mit JS nicht so vertraut sind, leicht zu lesen sind, ist es ein weiteres Werkzeug, das man benötigen und lernen muss, und ich persönlich bevorzuge es, meine Abhängigkeiten einzugrenzen und die Dinge einfach zu machen. Andererseits kann es schwieriger sein, diese Aufgaben durch die Kombination von NPM-Skripten und (wahrscheinlich JS-) Skripten zu ersetzen, auf denen diese Tools von Drittanbietern ausgeführt werden (z. B. Konfigurieren und Ausführen von Rimraf für Reinigungszwecke). In den meisten Fällen sind diese drei jedoch hinsichtlich ihrer Ergebnisse gleich.

Beispiele

Für die Beispiele schlage ich vor, dass Sie sich dieses React-Starterprojekt ansehen , das Ihnen eine schöne Kombination von NPM- und JS-Skripten zeigt, die den gesamten Erstellungs- und Bereitstellungsprozess abdecken. Sie finden diese NPM-Skripte im package.jsonStammordner in einer Eigenschaft mit dem Namen scripts. Dort werden Sie meist auf Befehle wie stoßen babel-node tools/run start. Babel-Node ist ein CLI-Tool (nicht für den Produktionsbetrieb gedacht), das zunächst die ES6-Datei tools/run(run.js-Datei in Tools ) kompiliert - im Grunde ein Runner-Dienstprogramm. Dieser Runner nimmt eine Funktion als Argument und führt sie aus. In diesem Fall handelt es sich um ein startweiteres Dienstprogramm (start.js) verantwortlich für das Bündeln von Quelldateien (sowohl Client als auch Server) und das Starten der Anwendung und des Entwicklungsservers (der Entwicklungsserver wird wahrscheinlich entweder Webpack Dev Server oder Browsersync sein).

Genauer gesagt, start.jserstellt sowohl clientseitige als auch serverseitige Bundles, startet einen Express-Server und initialisiert nach einem erfolgreichen Start die Browsersynchronisierung, die zum Zeitpunkt des Schreibens so aussah ( den neuesten Code finden Sie im React Starter-Projekt ).

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, wo sie die Serveradresse festlegen, die sie als Proxy verwenden möchten. Dies könnte http: // localhost: 3000 sein , und Browsersync startet einen Server, der http: // localhost: 3001 überwacht , wo die generierten Assets mit automatischer Änderung bereitgestellt werden Erkennung und Austausch heißer Module. Wie Sie sehen können, gibt es eine andere Konfigurationseigenschaft filesmit einzelnen Dateien oder Mustern. Die Browsersynchronisierung sucht nach Änderungen und lädt den Browser neu, wenn einige auftreten. Wie der Kommentar jedoch sagt, kümmert sich Webpack darum, js Quellen selbst mit HMR zu überwachen, sodass sie zusammenarbeiten Dort.

Jetzt habe ich kein gleichwertiges 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 Sie im Wesentlichen die gleichen Dinge tun würden wie im Starter-Kit, diesmal mit Task Runner, der einige Probleme für Sie löst, aber seine eigenen Probleme und einige Schwierigkeiten beim Erlernen der Verwendung und, wie ich sage, die Je mehr Abhängigkeiten Sie haben, desto mehr können schief gehen. Und das ist der Grund, warum ich solche Werkzeuge gerne los werde.

Update Oktober 2018

Wenn Sie sich über Front-End-Entwickler noch nicht sicher sind, können Sie hier einen kurzen Blick auf eine hervorragende Ressource werfen.

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

Update Juni 2018

Das Erlernen von modernem JavaScript ist schwierig, wenn Sie von Anfang an nicht dort waren. Wenn Sie der Neuling sind, denken Sie daran, diese ausgezeichnete Schrift zu überprüfen, um einen besseren Überblick zu erhalten.

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

Update Juli 2017

Kürzlich habe ich vom Grab-Team einen wirklich umfassenden Leitfaden gefunden, wie man sich der Front-End-Entwicklung im Jahr 2017 nähert. Sie können ihn wie folgt überprüfen.

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 für uns von Vorteil ist. Die Community ist aufgeteilt in Tools wie Browserify, Webpack, jspm, Grunt and Gulp. Sie könnten auch davon hören Yeoman or Slush. Das ist nicht wirklich ein Problem, es ist nur verwirrend für alle, die versuchen, einen klaren Weg vorwärts zu verstehen.

Jedenfalls möchte ich etwas beitragen.

1. Paketmanager

Paketmanager vereinfachen die Installation und Aktualisierung von Projektabhängigkeiten, bei denen es sich um Bibliotheken wie: jQuery, Bootstrapusw. handelt - alles, was auf Ihrer Site verwendet wird und nicht von Ihnen geschrieben wurde.

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

• NPMsteht für: Node JS package managerHilft Ihnen bei der Verwaltung aller Bibliotheken, auf die sich Ihre Software stützt. Sie würden Ihre Anforderungen in einer Datei definieren, die aufgerufen package.jsonund npm installin der Befehlszeile ausgeführt wird. Dann werden Ihre Pakete heruntergeladen und können verwendet werden. Könnte beide für front-end and back-endBibliotheken verwendet werden.

• Bower: Für das Front-End-Paketmanagement ist das Konzept mit NPM identisch. Alle Ihre Bibliotheken werden in einer Datei mit dem Namen gespeichert bower.jsonund dann bower installin der Befehlszeile ausgeführt.

Der größte Unterschied zwischen Bowerund NPMbesteht darin, dass NPM einen verschachtelten Abhängigkeitsbaum ausführt, während Bower einen flachen Abhängigkeitsbaum wie unten 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

Laube

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 zu npm 3 Duplication and Deduplication, bitte öffnen Sie das Dokument für weitere Details.

• Yarn: Ein neuer Paket - Manager für JavaScript veröffentlicht durch Facebookeinige weitere Vorteile vor kurzem im Vergleich zu NPM. Und mit Yarn können Sie weiterhin beide NPMund die BowerRegistrierung verwenden, um das Paket abzurufen. Wenn Sie zuvor ein Paket installiert haben, yarnwird eine zwischengespeicherte Kopie erstellt, die dies erleichtert offline package installs.

• jspm: ist ein Paketmanager für den SystemJSuniversellen Modullader, der auf dem dynamischen ES6Modullader aufbaut. Es ist kein völlig neuer Paketmanager mit eigenen Regeln, sondern funktioniert zusätzlich zu vorhandenen Paketquellen. Standardmäßig funktioniert es mit GitHubund npm. Da die meisten Bowerbasierten Pakete auf basieren GitHub, können wir diese Pakete auch mit installieren jspm. Es verfügt über eine Registrierung, in der die meisten häufig verwendeten Front-End-Pakete zur einfacheren Installation aufgelistet sind.

Sehen Sie den Unterschied zwischen Bowerund jspm: Paketmanager: Bower vs jspm

2. Modullader / Bündelung

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

• Das Problem der Downloadzeit kann weitgehend gelöst werden, indem eine Gruppe einfacher Module zu einer einzigen Datei verkettet 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 voneinander abhängig sind, kann dieser Mangel an 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, und deshalb sollten Sie ein Tool verwenden, um alles automatisch in einer einzigen Datei zu bündeln.

Dann hörten wir von RequireJS, Browserify, WebpackundSystemJS

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

ZB: 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.jskönnen wir myModule.jsals Abhängigkeit importieren und verwenden.

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

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

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

Lesen Sie mehr darüber CommonJSund machen Sie AMDsich leicht verständlich. Beziehung zwischen CommonJS, AMD und RequireJS?

• Browserify: Legen Sie fest, dass CommonJSformatierte Module im Browser verwendet werden sollen. Folglich Browserifyist es nicht so sehr ein Modullader wie ein Modulbündler: Es Browserifyhandelt sich ausschließlich um ein Tool zur Erstellung, das ein Codebündel erzeugt, 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 CommonJSFormat

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

Und 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 fasst sie zu einer einzigen Datei zusammen:

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

• Webpack: Es bündelt alle Ihre statischen Assets, einschließlich JavaScriptBilder, CSS und mehr, in einer einzigen Datei. Außerdem können Sie die Dateien über verschiedene Arten von Ladern verarbeiten. Sie können Ihre JavaScriptWith- CommonJSoder AMDModule-Syntax schreiben . Es greift das Build-Problem grundlegend integrierter und einfühlsamer an. In verwenden BrowserifySie Gulp/Gruntund eine lange Liste von Transformationen und Plugins, um die Arbeit zu erledigen. Webpackbietet sofort genug Strom, den Sie normalerweise nicht Gruntoder überhaupt nicht benötigen Gulp.

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 Modullader, der Module zur Laufzeit in einem der heute verwendeten gängigen Formate importieren kann ( CommonJS, UMD, AMD, ES6). Es basiert auf der ES6Polyfill des Modulladers und ist intelligent genug, um das verwendete Format zu erkennen und entsprechend zu handhaben. SystemJSkann auch ES6-Code (mit Babeloder Traceur) oder andere Sprachen wie TypeScriptund CoffeeScriptmithilfe von Plugins transpilieren.

Möchten Sie wissen, was das ist node moduleund warum es nicht gut für den Browser geeignet ist?

Weitere nützliche Artikel:

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

Warum jspmund SystemJS?

Eines der Hauptziele der ES6Modularität ist es wirklich einfach zu machen zu installieren und zu nutzen jede Javascript - Bibliothek von überall im Internet ( Github, npmusw.). Es werden nur zwei Dinge benötigt:

• Ein einzelner Befehl zum Installieren der Bibliothek
• Eine einzige Codezeile zum Importieren und Verwenden der Bibliothek

Mit jspmkö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 in Ihrer HTML-Datei ein externer Verweis erforderlich ist.

display.js

var $ = require('jquery'); 

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

3. Anschließend konfigurieren Sie diese Elemente innerhalb von, System.config({ ... })bevor Sie Ihr Modul importieren. Normalerweise wird beim Ausführen jspm initeine Datei mit config.jsdiesem Namen benannt .

4. Um diese Skripte ausgeführt werden zu können, müssen wir zu laden system.jsund config.jsauf der HTML - Seite. Danach laden wir die display.jsDatei mit dem SystemJSModullader.

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 auch npmmit verwenden, Webpackda Angular 2 es angewendet hat. Da jspmes für die Integration entwickelt wurde SystemJSund auf der vorhandenen npmQuelle funktioniert , liegt Ihre Antwort bei Ihnen.

3. Task Runner

Task-Runner und Build-Tools sind in erster Linie Befehlszeilen-Tools. Warum wir sie verwenden müssen: Mit einem Wort: Automatisierung . Je weniger Arbeit Sie leisten müssen, wenn Sie sich wiederholende Aufgaben wie Minimieren, Kompilieren, Komponententests oder Flusen ausführen , die uns früher viel Zeit gekostet haben, um mit der Befehlszeile oder sogar manuell zu arbeiten.

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

Jede Aufgabe Gruntbesteht aus einer Reihe verschiedener 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 genau wie, Gruntaber anstelle von Konfigurationen können Sie JavaScriptmit Streams schreiben, als wäre es eine Knotenanwendung. Bevorzugen Sie diese Tage.

Dies ist eine GulpBeispielaufgabendeklaration.

//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 yeomanein einfaches Skript installieren und ausführen. Dann alles hier für dich.

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. Wenn ich jedoch bei Google nach diesem Wissen suche, wird die Frage immer oben angezeigt, sodass ich mich entschlossen habe, sie zusammenfassend zu beantworten. Hoffe ihr fand es hilfreich.

OK, sie haben alle einige Ähnlichkeiten, sie tun die gleichen Dinge für Sie auf unterschiedliche und ähnliche Weise. Ich teile sie wie folgt in 3 Hauptgruppen ein :

webpack und browserify als beliebte, arbeiten wie Task-Runner, aber mit mehr Flexibilität, bündelt es auch alles als Ihre Einstellung, so dass Sie auf das Ergebnis als bundle.js verweisen können, zum Beispiel in einer einzigen Datei, einschließlich CSS und Javascript, z Weitere Details finden Sie in den folgenden Details:

Webpack

webpack ist ein Modulbündler für moderne JavaScript-Anwendungen. Wenn das Webpack Ihre Anwendung verarbeitet, erstellt es rekursiv ein Abhängigkeitsdiagramm, das jedes Modul enthält, das Ihre Anwendung benötigt, und packt dann alle diese Module in eine kleine Anzahl von Bundles - oft nur eines -, die vom Browser geladen werden sollen.

Es ist unglaublich konfigurierbar, aber um loszulegen, müssen Sie nur die vier Kernkonzepte verstehen: Eingabe, Ausgabe, Lader und Plugins.

Dieses Dokument soll einen allgemeinen Überblick über diese Konzepte geben und Links zu detaillierten konzeptspezifischen Anwendungsfällen enthalten.

mehr hier

browserify

Browserify ist ein Entwicklungstool, mit dem wir Module im Node.js-Stil schreiben können, die zur Verwendung im Browser kompiliert werden. Genau wie bei Node schreiben wir unsere Module in separate Dateien und exportieren externe Methoden und Eigenschaften mithilfe der Variablen module.exports und exportiert. Mit der Funktion require können wir sogar andere Module anfordern. Wenn wir den relativen Pfad weglassen, wird er in das Modul im Verzeichnis node_modules aufgelöst.

mehr hier

2) Aufgabenläufer

gulp und grunt sind Aufgabenläufer, im Grunde genommen das, was sie tun. Sie erstellen Aufgaben und führen sie aus, wann immer Sie möchten. Sie installieren beispielsweise ein Plugin, um Ihr CSS zu minimieren, und führen es dann jedes Mal aus, um es zu minimieren. Weitere Details zu jedem:

Schluck

gulp.js ist ein Open-Source-JavaScript-Toolkit von Fractal Innovations und der Open-Source-Community von GitHub, das als Streaming-Build-System in der Front-End-Webentwicklung verwendet wird. Es ist ein Task-Runner, der auf Node.js und Node Package Manager (npm) basiert und zur Automatisierung zeitaufwändiger und sich wiederholender Aufgaben im Zusammenhang mit der Webentwicklung wie Minimierung, Verkettung, Cache-Busting, Unit-Tests, Flusen, Optimierung usw. verwendet wird Ein Code-over-Configuration-Ansatz zur Definition seiner Aufgaben, der sich auf seine kleinen Plugins für die Ausführung stützt. Das gulp-Ökosystem verfügt über mehr als 1000 solcher Plugins, aus denen Sie auswählen können.

mehr hier

grunzen

Grunt ist ein JavaScript-Task-Runner, ein Tool, mit dem häufig verwendete Aufgaben wie Minimierung, Kompilierung, Komponententests, Flusen usw. automatisch ausgeführt werden. Über eine Befehlszeilenschnittstelle werden benutzerdefinierte Aufgaben ausgeführt, die in einer Datei definiert sind (als Grunt-Datei bezeichnet). . Grunt wurde von Ben Alman erstellt und ist in Node.js geschrieben. Es wird über npm verteilt. Derzeit sind mehr als fünftausend Plugins im Grunt-Ökosystem verfügbar.

mehr hier

3) Paketmanager

Paketmanager verwalten Plugins, die Sie in Ihrer Anwendung benötigen, und installieren sie über github usw. mit package.json für Sie. Dies ist sehr praktisch, um Ihre Module zu aktualisieren, zu installieren und Ihre App zu teilen. Weitere Details für jedes:

npm

npm ist ein Paketmanager für die Programmiersprache JavaScript. Dies ist der Standardpaketmanager für die JavaScript-Laufzeitumgebung Node.js. Es besteht aus einem Befehlszeilenclient, auch npm genannt, und einer Online-Datenbank öffentlicher Pakete, die als npm-Registrierung bezeichnet wird. Der Zugriff auf die Registrierung erfolgt über den Client, und die verfügbaren Pakete können über die npm-Website durchsucht und durchsucht werden.

mehr hier

Laube

Bower kann Komponenten verwalten, die HTML, CSS, JavaScript, Schriftarten oder sogar Bilddateien enthalten. Bower verkettet oder minimiert keinen Code und macht nichts anderes - es installiert nur die richtigen Versionen der benötigten Pakete und deren Abhängigkeiten. Zu Beginn holt und installiert Bower Pakete von überall her, kümmert sich um die Jagd, das Finden, Herunterladen und Speichern der gewünschten Inhalte. Bower verfolgt diese Pakete in einer Manifestdatei, bower.json.

mehr hier

und der neueste Paketmanager, den man sich nicht entgehen lassen sollte, er ist jung und schnell in einer realen Arbeitsumgebung im Vergleich zu npm, die ich zuvor hauptsächlich verwendet habe. Für die Neuinstallation von Modulen wird der Ordner node_modules doppelt überprüft, um die Existenz des Moduls zu überprüfen. Außerdem scheint die Installation der Module weniger Zeit in Anspruch zu nehmen:

Garn

Yarn ist ein Paketmanager für Ihren Code. Sie können damit Code verwenden und mit anderen Entwicklern aus der ganzen Welt teilen. Garn erledigt dies schnell, sicher und zuverlässig, sodass Sie sich nie Sorgen machen müssen.

Mit Yarn können Sie die Lösungen anderer Entwickler für verschiedene Probleme verwenden, um die Entwicklung Ihrer Software zu vereinfachen. Wenn Sie Probleme haben, können Sie Probleme melden oder einen Beitrag leisten. Wenn das Problem behoben ist, können Sie Garn verwenden, um alles auf dem neuesten Stand zu halten.

Code wird über ein Paket geteilt (manchmal auch als Modul bezeichnet). Ein Paket enthält den gesamten freigegebenen Code sowie eine package.json-Datei, die das Paket beschreibt.

mehr hier

Einige technische Vergleiche finden Sie auf npmcompare

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

Wie Sie sehen können, ist das Webpack sehr gut gepflegt. Eine neue Version erscheint durchschnittlich alle 4 Tage. Aber Gulp scheint die größte Community von allen zu haben (mit über 20.000 Sternen auf Github). Grunt scheint ein bisschen vernachlässigt zu sein (im Vergleich zu den anderen).

Wenn ich also einen über den anderen wählen müsste, würde ich mich für Gulp entscheiden

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

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

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

webpack-dev-server ist ein Live- Reload- Webserver, mit dem Webpack- Entwickler sofort Feedback erhalten, was sie tun. Es sollte nur während der Entwicklung verwendet werden.

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

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

Es kann auch als Modulbündler bezeichnet werden, da es die Modulabhängigkeiten verstehen muss und weiß, wie die Abhängigkeiten erfasst und gebündelt werden.

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

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

Beachten Sie, dass die ES6 Modullader Merkmale in Webpack2 verwenden System.import , die keine einzigen Browser nativ unterstützt.

Wann würden Sie gulp / grunt über npm + Plugins verwenden?

Sie können Gulp, Grunt, Brokoli, Brunch und Bower vergessen . Verwenden Sie stattdessen direkt npm-Befehlszeilenskripte, und Sie können zusätzliche Pakete wie diese hier 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 Yeoman oder ähnliche Tools nicht installieren .

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

Soweit ich weiß, kann es sowohl npm- als auch bower-Abhängigkeiten abrufen und hat andere geschätzte Funktionen.

Webpackist ein Bündler. Wie Browserfyes in der Codebasis nach Modulanforderungen ( requireoder import) sucht und diese rekursiv auflöst. Darüber hinaus können Sie konfigurieren Webpack, dass nicht nur JavaScript-ähnliche Module, sondern auch CSS, Bilder, HTML und buchstäblich alles aufgelöst werden. Was mich besonders begeistert, ist Webpack, dass Sie sowohl kompilierte als auch dynamisch geladene Module in derselben App kombinieren können. So erhält man einen echten Leistungsschub, insbesondere über HTTP / 1.x. Wie genau Sie es tun, habe ich hier anhand von Beispielen beschrieben. Http://dsheiko.com/weblog/state-of-javascript-modules-2017/ Als Alternative für Bundler kann man sich vorstellen Rollup.js( https://rollupjs.org/ ). , der den Code während der Kompilierung optimiert, aber alle gefundenen nicht verwendeten Chunks entfernt.

Denn AMDstattdessen RequireJSkann man mit native gehen ES2016 module system, aber geladen mit System.js( https://github.com/systemjs/systemjs )

Außerdem würde ich darauf hinweisen, dass npmoft als Automatisierungswerkzeug wie gruntoder verwendet wird gulp. Überprüfen Sie https://docs.npmjs.com/misc/scripts . Ich persönlich gehe jetzt mit npm-Skripten um und vermeide nur andere Automatisierungstools, obwohl ich mich in der Vergangenheit sehr dafür interessiert habe grunt. Bei anderen Tools müssen Sie sich auf unzählige Plugins für Pakete verlassen, die oft nicht gut geschrieben sind und nicht aktiv gewartet werden. npmkennt seine Pakete, so dass Sie eines der lokal installierten Pakete mit folgenden Namen aufrufen können:

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

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