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, dass sie nach dem Abrufen aller Abhängigkeiten webpack / gulp / grunt aufrufen.
  • bower ist wie npm , baut aber abgeflachte Abhängigkeiten (im Gegensatz zu npm die rekursiv arbeiten). Das bedeutet, dass npm die Abhängigkeiten für jede Abhängigkeit abruft (kann sie ein paar Mal holen), während bower erwartet, dass Sie Sub-Abhängigkeiten manuell hinzufügen. Manchmal werden bower und npm für Front-End und Back-End zusammen verwendet (da jedes Megabyte am Front-End wichtig sein könnte).
  • 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 verkleinern / transpilieren).
  • grunt vs gulp (ist wie maven vs. 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 Nachladen 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 verschiedene Implikationen gibt, wenn Sie gulp / grunt über npm + plugins verwenden müssen. Aber Task-Runner sind definitiv besser für komplexe Aufgaben (zB “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 browserify Knotenmodulen für Browser. browserify vs node require 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 browserify benutzen? Können wir das nicht mit Node / ES6-Importen machen?
  3. Wann würdest du gulp / grunt über npm + plugins benutzen?
  4. Bitte geben Sie Beispiele an, wenn Sie eine Kombination verwenden müssen

    Webpack und Browserifizieren

    Webpack und Browserify tun ziemlich genau die gleiche Aufgabe, nämlich den Code in einer Zielumgebung zu verarbeiten (hauptsächlich Browser, obwohl Sie auch andere Umgebungen wie Node ansprechen können). Ergebnis einer solchen Verarbeitung sind ein 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, 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 Bündel.

    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, aber mit beiden Leads zu sehr ähnlichen Ergebnissen durchführen kann . Es kommt auf persönliche Vorlieben an (Webpack ist trendiger). Btw, Webpack ist kein Task Runner, es ist nur processor 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. Andererseits könnte das Ersetzen dieser Aufgaben durch die Kombination von NPM-Skripten und (möglicherweise JS-) Skripten, die diese Tools von Drittanbietern ausführen (z. B. das Node-Skript, das rrraf zu Reinigungszwecken konfiguriert und ausführt ), schwieriger sein. Aber in den meisten Fällen sind diese drei hinsichtlich der Ergebnisse gleich.


    Beispiele

    Was die Beispiele betrifft, schlage ich vor, dass Sie sich dieses React-Starter-Projekt ansehen, das Ihnen eine schöne Kombination von NPM- und JS-Skripten zeigt, die den gesamten Build- und Deploy-process abdecken. Sie finden diese NPM-Skripts in package.json im Stammordner in einer Eigenschaft namens scripts . Dort werden Sie meistens auf Befehle wie babel-node tools/run start stoßen. Babel-node ist ein CLI-Tool (nicht für den produktiven Einsatz gedacht), das zunächst ES6-Datei- tools/run (run.js-Datei in Tools ) kompiliert – im Grunde ein Runner-Utility. Dieser Runner nimmt eine function als Argument und führt sie aus, was in diesem Fall der start – ein weiteres Dienstprogramm (start.js), das Quelldateien (Client und Server) bündelt und den Anwendungs- und Entwicklungsserver startet (der Dev-Server wird sein) wahrscheinlich entweder Webpack Dev Server oder Browsersync).

    Genauer gesagt erstellt start.js sowohl Client- als auch Server-Bundles, startet den Express-Server und startet nach erfolgreichem Start die Browser-Synchronisation, die zum Zeitpunkt des Schreibens so aussah (bitte beachten Sie das 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 , in dem die Serveradresse festgelegt wird, die sie als Proxy verwenden möchten. proxy.target könnte http: // localhost: 3000 sein , und Browsersync startet einen Server, der auf http: // localhost: 3001 abhört , wo die generierten Assets bereitgestellt werden mit automatischer Änderungserkennung und Hotmodul-Austausch. Wie Sie sehen können, gibt es eine weitere Konfiguration Property- files mit einzelnen Dateien oder Mustern Browser-Sync Uhren für Änderungen und lädt den Browser, wenn einige auftreten, aber wie der Kommentar sagt, Webpack kümmert sich js Quellen selbst mit HMR, so dass sie kooperiere dort.

    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 triggers, 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.

    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 unterteilt in Tools wie Browserify, Webpack, jspm, Grunt and Gulp . Vielleicht hören Sie auch von 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. Dabei handelt es sich um Bibliotheken wie: jQuery, Bootstrap usw. – alles, was auf Ihrer Site verwendet wird und nicht von Ihnen geschrieben wird.

    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 bei der Verwaltung aller Bibliotheken, auf die Ihre Software angewiesen ist. Sie würden Ihre Anforderungen in einer Datei mit dem Namen package.json und npm install in der Befehlszeile ausführen … dann werden Ihre Pakete heruntergeladen und können package.json verwendet werden. Könnte sowohl für front-end and back-end Bibliotheken verwendet werden.

    • Bower : Für das Front-End-Paketmanagement ist das Konzept bei NPM gleich. Alle Ihre Bibliotheken werden in einer Datei mit dem Namen bower.json gespeichert und anschließend bower install in der Befehlszeile ausgeführt.

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

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

    • Yarn : Ein neuer Facebook Paket-Manager für JavaScript mit einigen weiteren Vorteilen gegenüber NPM . Und mit Yarn können Sie weiterhin NPM und Bower Registrierung 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 SystemJS , der auf dem dynamischen ES6 SystemJS . 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 . Da die meisten Bower basierten Pakete auf GitHub basieren, können wir diese Pakete auch mit jspm installieren. 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 : Paket-Manager: Bower vs jspm


    2. Modullader / Bündelung

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

    • Das Problem der Downloadzeit kann weitgehend getriggers werden, indem eine Gruppe einfacher Module in einer einzigen Datei verkettet und minimiert wird.

    Z.B

      Wagon   
    • Die performance 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

      Skateboard            

    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 hörten wir von 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 wie 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.js können wir myModule.js als Abhängigkeit importieren und verwenden.

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

    Und dann können wir uns in unserem HTML auf die Verwendung von RequireJS beziehen.

      

    Lesen Sie mehr über CommonJS und AMD , um einfach zu verstehen. Beziehung zwischen CommonJS, AMD und RequireJS?

    • Browserify : Browserify fest, dass CommonJS formatierte Module im Browser verwendet werden dürfen. Folglich ist Browserify nicht so sehr ein Modul-Loader wie ein Modul-Bundler: Browserify ist ein Build-Time-Tool, das ein Browserify von Code 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 das CommonJS Format

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

      
    • Webpack : Es bündelt alle Ihre statischen Assets, einschließlich JavaScript , Bilder, CSS und mehr, in einer einzigen Datei. Darüber hinaus können Sie die Dateien über verschiedene Laderarten verarbeiten. Sie könnten Ihr JavaScript mit CommonJS oder AMD Modul-Syntax schreiben. Es greift das Build-Problem grundsätzlich integrierter und eigensinniger an. In Browserify Sie Gulp/Grunt und eine lange Liste von Transformationen und Plugins, um die Arbeit zu erledigen. Webpack bietet genug Power aus der Box, dass du normalerweise keinen Grunt oder Gulp brauchst.

    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 SystemJS , der Module zur Laufzeit in einem der gängigen Formate ( CommonJS, UMD, AMD, ES6 ) importieren kann . Es basiert auf dem Polyfill des ES6 Modulladeprogramms und ist intelligent genug, um das verwendete Format zu erkennen und entsprechend zu handhaben. SystemJS kann auch ES6-Code (mit Babel oder Traceur ) oder andere Sprachen wie TypeScript und CoffeeScript mithilfe von Plugins transponieren.

    Möchten Sie wissen, was das node module und warum es nicht gut in den Browser passt?

    Mehr nützlicher Artikel:

    • https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9 # c1q7ao3h4
    • http://jamesnelson.com/which-build-system-should-i-use-for-my-javascript-app/
    • https://apprtto.com/2016/06/the-short-history-of-javascript-module-loaders/

    Warum jspm und SystemJS ?

    Eines der Hauptziele der ES6 Modularität besteht darin, die Installation und Verwendung von Javascript-Bibliotheken von überall im Internet ( Github , npm usw.) zu npm . 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 , können Sie es tun.

    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 konfigurieren Sie diese Dinge in System.config({ ... }) bevor Sie Ihr Modul importieren. Wenn jspm init , gibt es config.js eine Datei namens config.js .

    2. Um diese Skripts ausführen zu können, müssen wir system.js und config.js auf der HTML-Seite laden. Danach laden wir die Datei display.js mit dem SystemJS Modul Loader.

    index.html

        

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


    3. Aufgabenläufer

    Task-Runner und Build-Tools sind hauptsächlich Befehlszeilen-Tools. Warum müssen wir sie verwenden? In einem Wort: Automatisierung . Sie müssen weniger Aufgaben erledigen, wenn Sie wiederkehrende Aufgaben wie Minimierung, Kompilierung, Komponententests oder Linting durchführen, was uns früher viel Zeit kostete, 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 bewältigen. Beliebt in den letzten Jahren.

    Jede Aufgabe in Grunt ist eine Reihe 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 JavaScript mit Streams schreiben, wie es eine Knoten-Anwendung ist. Bevorzugen Sie diese Tage.

    Dies ist eine Gulp Beispiel-Task-Deklaration.

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

    Siehe mehr: 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 yeoman installieren und ein einfaches Skript ausführen. Dann ist alles hier für dich.

    Finde hier mehr.

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

    Sehen Sie mehr: 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 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.

    Sie können einige technische Vergleiche auf npmcompare finden

    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 (verglichen mit den anderen).

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

    OK, sie haben alle einige Ähnlichkeiten, sie machen die gleichen Dinge für dich auf verschiedene und ähnliche Arten, ich unterteile sie in 3 Hauptgruppen wie unten:


    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. Wenn webpack Ihre Anwendung verarbeitet, erstellt es rekursiv ein Abhängigkeitsdiagramm, das jedes Modul enthält, das Ihre Anwendung benötigt, und verpackt dann alle diese Module in eine kleine Anzahl von Bundles – oft nur eine -, die vom Browser geladen werden.

    Es ist unglaublich konfigurierbar, aber zu Beginn müssen Sie nur vier corekonzepte verstehen: Eingabe, Ausgabe, Loader und Plugins.

    Dieses Dokument soll einen Überblick über diese Konzepte geben und Links zu detaillierten konzeptionellen Anwendungsfällen bieten.

    mehr hier

    browserifizieren

    Browserify ist ein Entwicklungstool, mit dem wir Module im node.js-Stil schreiben können, die für die Verwendung im Browser kompiliert werden. Genau wie der Knoten schreiben wir unsere Module in separate Dateien und exportieren externe Methoden und Eigenschaften mit den Variablen module.exports und exports. Wir können sogar andere Module erfordern, die die require-function verwenden, und wenn wir den relativen Pfad weglassen, wird er in das Modul im Verzeichnis node_modules aufgetriggers.

    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 der Open-Source-Community von GitHub, das als Streaming-Build-System in der Front-End-Webentwicklung eingesetzt wird. Es ist ein Task-Runner, der auf Node.js und Node Package Manager (npm) basiert und für die Automatisierung von zeitraubenden und repetitiven Aufgaben in Web-Entwicklung wie Minification, Verkettung, Cache-Busting, Komponententests, Linting, Optimierung usw. verwendet wird ein Code-over-Configuration-Ansatz, um seine Aufgaben zu definieren und sich auf seine kleinen, einfach zu bedienenden Plugins zu stützen, um sie auszuführen. Schluckökosystem hat mehr als 1000 solcher Plugins verfügbar zur Auswahl.

    mehr hier

    grunzen

    Grunt ist ein JavaScript-Task-Runner, ein Tool, das häufig verwendete Aufgaben wie Minimierung, Kompilierung, Komponententests, Linting usw. automatisch ausführt. Es verwendet eine Befehlszeilenschnittstelle zum Ausführen benutzerdefinierter Tasks, die in einer Datei definiert sind (Gruntfile). . Grunt wurde von Ben Alman erstellt und 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, 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-Paket-Manager für die JavaScript-Laufzeitumgebung Node.js. Es besteht aus einem Kommandozeilen-Client, auch npm genannt, und einer Online-database mit öffentlichen Paketen, der npm-Registry. Auf die Registrierung wird über den Client zugegriffen, 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, fonts oder sogar Bilddateien enthalten. Bower verkettet oder verkürzt Code nicht oder führt sonst nichts aus – er installiert nur die richtigen Versionen der benötigten Pakete und deren Abhängigkeiten. Um zu beginnen, arbeitet Bower, indem er Pakete von überall her holt und installiert, sich um das Jagen, Suchen, Herunterladen und Speichern des gesuchten Materials kümmert. Bower verfolgt diese Pakete in einer 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, Code mit anderen Entwicklern aus der ganzen Welt zu verwenden und zu teilen. Garn macht das schnell, sicher und zuverlässig, sodass Sie sich keine Sorgen machen müssen.

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

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

    mehr hier


    Eine kleine Anmerkung 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 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-Web-Server, mit dem Webpack- Entwickler sofort Feedback bekommen, was sie tun. Es sollte nur während der Entwicklung verwendet werden.

    Dieses Projekt wurde stark vom nof5 Unit Test Tool inspiriert.

    Webpack, wie der Name schon sagt, wird ein EINZELPAKET für das Web erzeugen. Das Paket wird minimiert und zu einer einzigen Datei kombiniert (wir leben immer noch im HTTP 1.1-Zeitalter). Webpack macht die Magie der Kombination der Ressourcen (JavaScript, CSS, Bilder) und injiziert sie wie : .

    Es kann auch als Modulbündler bezeichnet werden, da es Modulabhängigkeiten verstehen und die Abhängigkeiten erfassen und bündeln muss.

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

    Sie können Browserify für die gleichen Aufgaben verwenden, für die Sie Webpack verwenden würden . – Webpack ist jedoch kompakter.

    Beachten Sie, dass die ES6- Modulladefunktionen in Webpack2 System.import verwenden , das nicht von einem einzelnen Browser nativ unterstützt wird.

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

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

    StackShare bietet eine Seite-an-Seite (oder einen Stapel ) von drei Werkzeugen gleichzeitig.

    Hier ist es für Npm vs Bower vs Browserify und für Schluck vs Webpack vs Grunt

    Auf diesen Vergleichsseiten finden Sie folgendes:

    • Anzahl der Stimmen, die jeder von der StackShare-Community erhalten hat
    • welche Unternehmen nutzen sie in ihrem Tech-Stack
    • Zinsniveau für jeden im Laufe der Zeit
    • Vorteile für jedes Werkzeug

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

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

    Außerdem würde ich darauf hinweisen, dass npm oft als automatisierendes Werkzeug wie grunt oder gulp . Sehen Sie sich https://docs.npmjs.com/misc/scripts an . Ich persönlich gehe jetzt mit npm Skripten nur andere Automatisierungs-Tools zu vermeiden, obwohl ich in der Vergangenheit sehr in grunt . With other tools you have to rely on countless plugins for packages, that often are not good written and not being actively maintained. npm knows its packages, so you call to any of locally installed packages by name like:

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

    Actually you as a rule do not need any plugin if the package supports CLI.