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

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:

• 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 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!");

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

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

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

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

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

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.

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.

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.