Frage 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 & bower sind Paketmanager. Sie laden nur die Abhängigkeiten herunter und wissen nicht, wie sie selbst Projekte erstellen. Was sie wissen, ist anzurufen webpack/gulp/grunt nach dem Abrufen aller Abhängigkeiten.
  • bower ist wie npm, aber baut abgeflachte Abhängigkeiten Bäume (im Gegensatz zu npm was macht es rekursiv). Bedeutung npm holt die Abhängigkeiten für jede Abhängigkeit (kann dieselben ein paar Mal holen), während bower erwartet, dass Sie Teilabhängigkeiten manuell einschließen. Manchmal bower und npm werden zusammen für Front-End und Back-End verwendet (da jedes Megabyte am Front-End wichtig sein kann).
  • grunt und gulp sind Task-Runner, um alles zu automatisieren, was automatisiert werden kann (z. B. CSS / Sass kompilieren, Bilder optimieren, ein Bündel erstellen und es minimieren / übersetzen).
  • grunt gegen gulp (ist wie maven gegen gradle oder Konfiguration vs. Code). Grunt basiert auf der Konfiguration separater unabhängiger Aufgaben, wobei jede Aufgabe die Datei öffnet / handhabt / schließt. Gulp benötigt weniger Code und basiert auf Node-Streams, wodurch es Pipe-Chains erstellen kann (ohne die gleiche Datei erneut zu öffnen) und es schneller macht.
  • webpack (webpack-dev-server) - Für mich ist es ein Task Runner mit heißem Neuladen von Änderungen, mit dem man alle JS / CSS-Beobachter vergessen kann.
  • npm/bower + Plugins können Aufgabenläufer ersetzen. Ihre Fähigkeiten überschneiden sich oft, so dass es unterschiedliche Auswirkungen gibt, wenn Sie sie verwenden müssen gulp/grunt Über npm + Plugins. Aber Task-Runner sind definitiv besser für komplexe Aufgaben (zum Beispiel "auf jedem Build erstellen Bundle, transpile von ES6 zu ES5, führen Sie es in allen Browser-Emulatoren, machen Screenshots und Deploy zu Dropbox über FTP").
  • browserify ermöglicht das Verpacken von Knotenmodulen für Browser. browserify vs nodeist es require ist eigentlich AMD gegen CommonJS.

Fragen:

  1. Was ist webpack & webpack-dev-server? Offizielle Dokumentation sagt, es ist ein Modul Bundler, aber für mich ist es nur ein Aufgabenläufer. Was ist der Unterschied?
  2. Wo würdest du verwenden? browserify? Können wir das nicht mit Node / ES6-Importen machen? 
  3. Wann würdest du verwenden? gulp/grunt Über npm + Plugins?
  4. Bitte geben Sie Beispiele an, wenn Sie eine Kombination verwenden müssen

1505
2018-01-28 13:28


Ursprung


Antworten:


Webpack und Browserifizieren

Webpack und Browserify machen ziemlich genau die gleiche Arbeit, nämlich Verarbeitung Ihres Codes zur Verwendung in einer Zielumgebung (hauptsächlich Browser, obwohl Sie andere Umgebungen wie Node anvisieren können). Ergebnis einer solchen Verarbeitung ist eines oder mehrere Bündel - Zusammengestellte Skripte, die für eine zielgerichtete Umgebung geeignet sind.

Angenommen, Sie haben einen in Module unterteilten ES6-Code geschrieben und möchten ihn im Browser ausführen können. Wenn diese Module Knotenmodule sind, wird der Browser sie nicht verstehen, da sie nur in der Knotenumgebung existieren. ES6-Module funktionieren auch nicht in älteren Browsern wie IE11. Darüber hinaus hätten Sie möglicherweise experimentelle Sprachfunktionen (ES next proposals) verwendet, die von Browsern noch nicht implementiert werden, sodass das Ausführen eines solchen Skripts nur Fehler auslösen würde. Diese Tools wie Webpack und Browserify lösen diese Probleme durch das Übersetzen eines solchen Codes in einen Formularbrowser kann ausgeführt werden. Darüber hinaus ermöglichen sie eine Vielzahl von Optimierungen für diese Bündel.

Allerdings unterscheiden sich Webpack und Browserify in vielerlei Hinsicht, Webpack bietet standardmäßig viele Tools (z. B. Code-Splitting), während Browserify dies nur nach dem Herunterladen von Plugins aber tun kann Beide führen zu sehr ähnlichen Ergebnissen. Es kommt auf persönliche Vorlieben an (Webpack ist trendiger). Btw, Webpack ist kein Task Runner, es ist nur Prozessor Ihrer Dateien (es verarbeitet sie durch so genannte Loader und Plugins) und kann (unter anderem) von einem Task Runner ausgeführt werden.


Webpack-Entwicklungsserver

Webpack Dev Server bietet eine ähnliche Lösung für Browsersync - einen Entwicklungsserver, auf dem Sie Ihre App schnell bereitstellen können und sofort den Entwicklungsfortschritt überprüfen, indem der Dev-Server den Browser automatisch bei Codeänderungen aktualisiert oder sogar geänderten Code in den Browser überträgt ohne Nachladen mit so genanntem Hot Module Replacement.


Aufgabenläufer vs NPM-Skripte

Ich habe Gulp wegen seiner Prägnanz und einfachen Aufgabe benutzt, aber später habe ich herausgefunden, dass ich weder Gulp noch Grunt brauche. Alles, was ich jemals benötigt hätte, könnte mit NPM-Skripten gemacht worden sein, um Drittanbieter-Tools über ihre API laufen zu lassen. 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 benötigt und gelernt wird, und ich persönlich bevorzuge es, meine Abhängigkeiten einzuschränken und Dinge einfach zu machen. Auf der anderen Seite ersetzen diese Tasks durch die Kombination von NPM-Skripten und (möglicherweise JS) Skripten, die diese Drittanbieter-Tools ausführen (z. B. Node-Skript konfigurieren und ausführen rimraf zu Reinigungszwecken) könnte schwieriger sein. Aber in den meisten Fällen diese drei sind in Bezug auf die Ergebnisse gleich.


Beispiele

Was die Beispiele betrifft, schlage ich vor, dass Sie sich das ansehen Starterprojekt reagieren, die Ihnen eine nette Kombination von NPM- und JS-Skripten zeigt, die den gesamten Build- und Deploy-Prozess abdecken. Sie finden diese NPM-Skripts in package.json im Stammordner in einer benannten Eigenschaft scripts. Dort werden Sie meistens Befehle wie babel-node tools/run start. Babel-node ist ein CLI-Tool (nicht für den produktiven Einsatz gedacht), das zunächst eine ES6-Datei kompiliert tools/run (Die Datei run.js befindet sich in Werkzeuge) - im Grunde ein Runner Dienstprogramm. Dieser Läufer nimmt eine Funktion als Argument und führt sie aus, was in diesem Fall ist start - ein weiteres Dienstprogramm (start.js), das für die Bündelung der Quelldateien (Client und Server) verantwortlich ist und den Anwendungs- und Entwicklungsserver startet (der Dev-Server wird wahrscheinlich entweder Webpack Dev Server oder Browsersync sein).

Genauer gesagt erstellt start.js sowohl Client- als auch Server-Side-Bundles, startet den Express-Server und startet nach erfolgreichem Start der Browser-Synchronisation, die zum Zeitpunkt des Schreibens so aussah (siehe reagieren Starter-Projekt 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, wo sie die Serveradresse einstellen, die sie als Proxy verwenden möchten, was sein könnte http: // localhost: 3000und Browsersync startet einen Server, der überwacht wird http: // localhost: 3001, wo die generierten Assets mit automatischer Änderungserkennung und Hot-Module-Ersatz geliefert werden. Wie Sie sehen, gibt es eine weitere Konfigurationseigenschaft files mit einzelnen Dateien oder Mustern Browser-Sync passt auf Änderungen und lädt den Browser neu, wenn einige auftreten, aber wie der Kommentar sagt, kümmert sich Webpack selbst um js-Quellen mit HMR, damit sie dort zusammenarbeiten.

Nun habe ich kein äquivalentes Beispiel einer solchen Grunt- oder Gulp-Konfiguration, aber mit Gulp (und etwas ähnlich mit Grunt) würden Sie einzelne Aufgaben in gulpfile.js 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 wie im Starter-Kit machst, dieses Mal mit Task Runner, das einige Probleme für dich löst, aber seine eigenen Probleme und einige Schwierigkeiten beim Erlernen der Benutzung präsentiert, und wie ich schon sagte, die Je mehr Abhängigkeiten Sie haben, desto mehr kann schief gehen. Und deshalb entferne ich solche Werkzeuge gerne.


795
2018-01-28 14:34



Aktualisierung Juni 2018

Das Erlernen von modernem JavaScript ist schwierig, wenn Sie nicht von Anfang an dabei waren. Wenn Sie der Neuling sind, denken Sie daran, dieses ausgezeichnete geschrieben zu überprüfen, um einen besseren Überblick zu haben.

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

Aktualisierung Juli 2017

Vor kurzem habe ich einen wirklich umfassenden Guide vom Grab-Team gefunden, der sich mit der Entwicklung der Front-End-Entwicklung im Jahr 2017 befasst. Sie können es sich unten ansehen.

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


Ich habe auch schon lange danach gesucht, da es viele Tools gibt, die uns in einem anderen Aspekt zugute kommen. Die Community ist gegliedert nach 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 nach vorne zu verstehen.

Jedenfalls möchte ich etwas beitragen.

1. Paketmanager 

Paket-Manager vereinfachen die Installation und Aktualisierung von Projektabhängigkeiten, bei denen es sich um folgende Bibliotheken handelt: jQuery, Bootstrapusw. - alles, was auf Ihrer Website 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 ein paar Befehle im Terminal ersetzt.

  • NPM steht für: Node JS package manager hilft Ihnen, alle Bibliotheken zu verwalten, auf die Ihre Software angewiesen ist. Sie würden Ihre Bedürfnisse in einer Datei namens definieren package.json und Renn npm install in der Befehlszeile ... dann BANG, sind Ihre Pakete heruntergeladen und einsatzbereit. Könnte sowohl für front-end and back-end Bibliotheken.

  • Bower: Für das Front-End-Paketmanagement ist das Konzept mit NPM identisch. Alle Ihre Bibliotheken sind in einer Datei namens gespeichert bower.json und dann rennen bower install in der Befehlszeile.

Der größte Unterschied zwischen Bower und NPM ist, dass NPM verschachtelt ist   Abhängigkeitsbaum, während Bower einen flachen Abhängigkeitsbaum wie unten benötigt.

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

  • Yarn: Ein neuer Paketmanager für JavaScript  veröffentlicht durch Facebook vor kurzem mit einigen mehr Vorteilen verglichen mit NPM. Und mit Yarn können Sie immer noch beides verwenden NPMund Bower Registrierung, um das Paket zu holen. Wenn Sie bereits ein Paket installiert haben, yarn erstellt eine zwischengespeicherte Kopie, die erleichtert offline package installs.

  • jspm: ist ein Paketmanager für die SystemJS Universeller Modullader, der auf dem Dynamischen aufbaut ES6 Modullader. Es handelt sich nicht um einen völlig neuen Paketmanager mit eigenen Regeln, sondern vielmehr um bestehende Paketquellen. Out of the Box funktioniert es mit GitHub und npm. Wie die meisten Bower basierte Pakete basieren auf GitHubkönnen wir diese Pakete mit installieren jspm auch. Es verfügt über eine Registrierung, die die meisten häufig verwendeten Front-End-Pakete für eine einfachere Installation auflistet.

Siehe den Unterschied zwischen Bower und jspm:    Paketmanager: Bower vs jspm


2. Modullader / Bündelung

Bei den meisten Projekten mit beliebigem Umfang wird der Code auf mehrere Dateien aufgeteilt. Sie können jede Datei einfach mit einer Person einschließen <script> Tag jedoch <script> stellt eine neue HTTP-Verbindung her, und für kleine Dateien - was ein Ziel der Modularität ist - kann die Verbindungszeit wesentlich länger dauern als die Übertragung der Daten. Während die Skripts heruntergeladen werden, können auf der Seite keine Inhalte geändert werden.

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

Dann haben wir davon gehört RequireJS, Browserify, Webpack und SystemJS

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

Z.B: 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
    }
});

Im main.jsWir können importieren myModule.js als Abhängigkeit und benutze es.

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

Und dann in unserem HTMLkönnen wir uns auf die Verwendung beziehen RequireJS.

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

Lesen Sie mehr über CommonJS und AMD leicht verstehen.    Beziehung zwischen CommonJS, AMD und RequireJS?

  • Browserify: Stellen Sie die Verwendung von CommonJS formatierte Module im Browser. Folglich, Browserify ist nicht so sehr ein Modullader als ein Modulbündler: Browserify ist ein Build-Time-Tool, das ein Code-Paket erzeugt, das dann clientseitig geladen werden kann.

Beginnen Sie mit einem Build-Computer, auf dem node & npm installiert ist, und rufen Sie das Paket ab:

npm install -g –save-dev browserify

Schreiben Sie Ihre Module in CommonJSFormat

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

Und wenn Sie zufrieden sind, geben Sie den folgenden Befehl aus:

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

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

<script src=”bundle-name.js”></script>
  • Webpack: Es bündelt alle Ihre statischen Vermögenswerte, einschließlich JavaScript, Bilder, CSS und mehr in einer einzigen Datei. Darüber hinaus können Sie die Dateien über verschiedene Laderarten verarbeiten. Du könntest dein schreiben JavaScript mit CommonJS oder AMD Modul-Syntax. Es greift das Build-Problem grundsätzlich integrierter und eigensinniger an. Im Browserify Sie nutzen Gulp/Grunt und eine lange Liste von Transformationen und Plugins, um die Arbeit zu erledigen. Webpack bietet ausreichend Leistung, die Sie normalerweise nicht benötigen Grunt oder Gulp überhaupt.

Grundlegende Nutzung 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 kann Module zur Laufzeit in einem der gängigen Formate importieren heute benutzt (CommonJS, UMD, AMD, ES6). Es ist auf der Oberseite des gebaut ES6 Modullader Polyfill und ist schlau genug, um das verwendete Format zu erkennen und entsprechend zu handhaben. SystemJS kann auch ES6 - Code transpilieren (mit Babel oder Traceur) oder andere Sprachen wie TypeScript und CoffeeScript mit Plugins.

Willst du wissen, was ist das? node module und warum es nicht gut in Browser passt.

Mehr nützlicher Artikel:


Warum jspm und SystemJS?

Eines der Hauptziele von ES6 Modularität soll es wirklich einfach machen   Installieren und verwenden Sie jede Javascript - Bibliothek von überall auf der   Internet (Github, npm, etc.). Es werden nur zwei Dinge benötigt:

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

Also mit jspm, du kannst es schaffen.

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

display.js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");
  1. Dann konfigurierst du diese Dinge in dir System.config({ ... }) Vor   Importieren Sie Ihr Modul. Normalerweise beim Ausführen jspm initEs wird eine Datei geben   genannt config.js für diesen Zweck.

  2. Damit diese Skripts ausgeführt werden können, müssen wir sie laden system.js und config.js auf der HTML-Seite. Danach laden wir die display.js Datei mit   das SystemJS Modullader.

index.html

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

Bekannt: Sie können auch verwenden npm mit Webpack wie Angular 2 es angewendet hat. Schon seit jspm wurde entwickelt, um mit zu integrieren SystemJS und es funktioniert zusätzlich zu bestehenden npm Quelle, so ist deine Antwort an dir.


3. Aufgabenläufer

Task-Runner und Build-Tools sind hauptsächlich Befehlszeilen-Tools. Warum müssen wir sie verwenden? Mit einem Wort: Automatisierung. Je weniger Arbeit Sie bei wiederkehrenden Aufgaben wie z Minification, Compilation, Unit Testing, Lintingwas uns früher viel Zeit gekostet hat, um mit der Befehlszeile oder sogar manuell zu tun.

  • 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 bewältigen. Beliebt in den letzten Jahren.

Jede Aufgabe in Grunt ist ein Array von verschiedenen Plugin-Konfigurationen, die einfach aufeinander folgend in einer streng unabhängigen und sequentiellen Art und Weise 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 statt Konfigurationen können Sie schreiben JavaScript mit Streams wie es ist eine Knoten-Anwendung. Bevorzugen Sie diese Tage.

Das ist ein Gulp Beispiel für eine Aufgabenerklärung

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

Mehr sehen: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fteonahri


4. Gerüste Werkzeuge

  • Slush and Yeoman: Sie können Starter-Projekte mit ihnen erstellen. Zum Beispiel planen Sie, einen Prototyp mit HTML und SCSS zu bauen, anstatt manuell einige Ordner wie scss, css, img, fonts zu erstellen. Sie können einfach installieren yeoman und führe ein einfaches Skript aus. Dann ist alles hier für dich.

Finde mehr Hier.

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

Mehr sehen: https://www.quora.com/Was-Sind-die-Unterschiede-zwischen-NPM-Bower-Grunt-Gulp-Webpack-Browsery-Slush-Yeoman-and-Express


Meine Antwort stimmt nicht wirklich mit dem Inhalt der Frage überein, aber wenn ich auf der Suche nach diesen Kenntnissen bei Google bin, sehe ich immer die Frage oben, so dass ich mich entschieden habe, sie in der Zusammenfassung zu beantworten. Ich hoffe, ihr hattet es hilfreich gefunden.


550
2017-10-03 06:23



Sie können einige technische Vergleiche finden npmcompare

Vergleiche browserify vs. grunt vs gulp vs. webpack

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

Wenn ich mich also für einen anderen entscheiden müsste, würde ich mit Gulp gehen


45
2018-05-01 09:04



OK, Sie alle haben einige Gemeinsamkeiten, sie machen die gleichen Dinge für dich auf unterschiedliche und ähnliche Weise, ich teile sie in 3 Hauptgruppen wie nachstehend:


1) Modulbündler 

webpack und browserify als beliebte, arbeiten wie Task Runner, aber mit mehr Flexibilität, und bündelt alles als Ihre Einstellung, so können Sie das Ergebnis als Bundle.js zum Beispiel in einer einzigen Datei einschließlich der CSS und Javascript, z mehr Details von jedem, schauen Sie sich die Details unten an:

Webpaket

webpack ist ein Modulbündler für moderne JavaScript-Anwendungen. Wann   webpack verarbeitet Ihre Anwendung, rekursiv baut sie eine Abhängigkeit auf   Grafik, die jedes Modul enthält, das Ihre Anwendung benötigt, dann Pakete   all diese Module in eine kleine Anzahl von Bündeln - oft nur eine -   vom Browser geladen werden.

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

Dieses Dokument soll einen Überblick auf hohem Niveau geben   Konzepte, während Links zu detaillierten Konzept spezifisch   Anwendungsfälle.

Mehr Hier

browserifizieren

Browserify ist ein Entwicklungstool, mit dem wir node.js-style schreiben können   Module, die für die Verwendung im Browser kompilieren. Genau wie Knoten schreiben wir   unsere Module in separaten Dateien, Exportieren externer Methoden und   Eigenschaften, die das Modul verwenden. exportiert und exportiert Variablen. Wir können sogar   andere Module erfordern die require Funktion, und wenn wir die   relativen Pfad wird es zu dem Modul in den node_module aufgelöst   Verzeichnis.

Mehr Hier


2) Aufgabenläufer 

Schlucken und Grunzen sind Task Runner, im Grunde was sie tun, Aufgaben erstellen und sie ausführen, wann immer Sie wollen, zum Beispiel installieren Sie ein Plugin, um Ihr CSS zu minimieren und dann jedes Mal ausführen, um zu minimieren, mehr Details zu jedem:

Schluck

gulp.js ist ein Open-Source-JavaScript-Toolkit von Fractal Innovations   und die Open-Source-Community bei GitHub, die als Streaming-Build verwendet wird   System in der Front-End-Web-Entwicklung. Es ist ein Task Runner, auf dem gebaut wird   Node.js und Node Package Manager (npm), die für die Automatisierung von   zeitraubende und sich wiederholende Aufgaben in der Web-Entwicklung wie   Verkleinerung, Verkettung, Cache-Busting, Unit Testing, Linting,   Optimierung usw. verwendet einen Code-over-Configuration-Ansatz   Definieren Sie seine Aufgaben und verlässt sich auf seine kleinen, einfach zu bedienenden Plugins   führe sie aus. Schluck Ökosystem hat mehr als 1000 solcher Plugins zur Verfügung gestellt   wählen von.

Mehr Hier

grunzen

Grunt ist ein JavaScript-Task-Runner, ein Tool, das automatisch verwendet wird   Führen Sie häufig verwendete Aufgaben wie Minimierung, Kompilierung, Einheit aus   Testen, Linting usw. Es verwendet eine Befehlszeilenschnittstelle zum Ausführen von benutzerdefinierten   Aufgaben, die in einer Datei definiert sind (Gruntfile). Grunt wurde erstellt von   Ben Alman und ist in Node.js geschrieben. Es wird über Npm verteilt.   Derzeit sind mehr als fünftausend Plugins in der   Grunt Ökosystem.

Mehr Hier


3) Paketmanager 

Paketmanager, was sie tun, ist das Verwalten von Plugins, die Sie in Ihrer Anwendung benötigen und installieren sie für Sie über Github usw. mit package.json, sehr praktisch, um Module zu aktualisieren, sie zu installieren und Ihre App zu teilen, mehr Details für jede:

npm

npm ist ein Paketmanager für die Programmiersprache JavaScript. Es   ist der Standard-Paketmanager für die JavaScript-Laufzeitumgebung   Node.js. Es besteht aus einem Kommandozeilen-Client, auch npm genannt, und einem   Online-Datenbank von öffentlichen Paketen, die npm-Registrierung genannt wird. Das   Auf die Registrierung wird über den Client zugegriffen, und die verfügbaren Pakete können sein   durchsucht und über die npm-Website gesucht.

Mehr Hier

Laube

Bower kann Komponenten verwalten, die HTML, CSS, JavaScript, Schriftarten enthalten   oder sogar Bilddateien. Bower verkettet oder verkleinert Code nicht oder tut es nicht   alles andere - es installiert nur die richtigen Versionen der Pakete   Sie brauchen und ihre Abhängigkeiten.   Um zu beginnen, arbeitet Bower, indem es Pakete von holt und installiert   überall auf der Jagd, suchen, herunterladen und speichern die   Sachen, nach denen du suchst. Bower verfolgt diese Pakete in einem   Manifestdatei, bower.json.

Mehr Hier

und der neueste Paket-Manager, der nicht verpasst werden sollte, er ist jung und schnell in einer realen Arbeitsumgebung im Vergleich zu npm, den ich zuvor am meisten benutzt habe, zur Neuinstallation von Modulen, prüft er den Ordner node_modules doppelt, um die Existenz des Moduls zu überprüfen, scheint auch die Installation der Module dauert weniger Zeit:

Garn

Yarn ist ein Paketmanager für Ihren Code. Es ermöglicht Ihnen, und zu verwenden   teile Code mit anderen Entwicklern aus der ganzen Welt. Garn macht das   schnell, sicher und zuverlässig, damit Sie sich keine Sorgen machen müssen.

Yarn ermöglicht es Ihnen, die Lösungen anderer Entwickler zu verwenden   Probleme, die es Ihnen erleichtern, Ihre Software zu entwickeln. Wenn du   Probleme haben, können Sie Probleme melden oder zurückzahlen, und wenn die   Problem ist behoben, Sie können Garn verwenden, um alles auf dem neuesten Stand zu halten.

Der Code wird durch etwas geteilt, das Paket genannt wird (manchmal bezeichnet)   als ein Modul). Ein Paket enthält auch den gesamten Code, der gemeinsam genutzt wird   als Paket.json-Datei, die das Paket beschreibt.

Mehr Hier



42
2018-05-21 03:43



Eine kleine Anmerkung zu npm: npm3 versucht, Abhängigkeiten flach zu installieren

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


40
2018-04-14 15:53



Was ist Webpack & Webpack-Dev-Server? Offizielle Dokumentation sagt, es ist ein Modul Bundler, aber für mich ist es nur ein Aufgabenläufer. Was ist der Unterschied?

webpack-dev-server ist ein Live-Nachladen von Webserver, der Webpaket Entwickler nutzen sofort Feedback, was sie tun. Es sollte nur während der Entwicklung verwendet werden.

Dieses Projekt ist stark von der. Inspiriert nof5 Unit-Test-Tool.

Webpaket Wie der Name schon sagt, wird ein SINGLE  PackAlter für die Netz. Das Paket wird minimiert und zu einer einzigen Datei kombiniert (wir leben immer noch im HTTP 1.1-Zeitalter). Webpaket macht die Magie der Kombination der Ressourcen (JavaScript, CSS, Bilder) und injiziert sie so: <script src="assets/bundle.js"></script>.

Es kann auch angerufen werden Modulbündler weil es Modulabhängigkeiten verstehen muss, und wie man die Abhängigkeiten ergreift und bündelt.

Wo würdest du browserify benutzen? Können wir das nicht mit Node / ES6-Importen machen?

Du könntest benutzen Browserifizieren auf die genau gleichen Aufgaben, wo Sie verwenden würden Webpaket. - Webpaket ist jedoch kompakter.

Notiere dass der ES6-Modulladerfunktionen im Webpack2 benutzen Systemimport, die nicht ein einzelner Browser nativ unterstützt.

Wann würdest du gulp / grunt über npm + plugins benutzen?

Sie können vergessen  Schluck, Grunt, Brokoli, Brunch und Bower. Verwenden Sie stattdessen direkt die npm-Befehlszeilenskripte, und Sie können zusätzliche Pakete wie diese hier eliminieren Schluck:

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 verwenden Schluck und Grunzen Konfigurationsdatei-Generatoren beim Erstellen von Konfigurationsdateien für Ihr Projekt. Auf diese Weise müssen Sie nicht installieren Yeoman oder ähnliche Werkzeuge.


10
2017-11-22 01:23



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

Afaik, kann es sowohl npm als auch bower Abhängigkeiten holen und hat andere geschätzte Eigenschaften.


9
2017-10-14 15:58