Erste Schritte mit Browserify

JavaScript -Implementierungen wurden immer komplexer, da das schöne Tier, das wir das Web nennen, jedes Jahr weiterentwickelt. Viele von uns arbeiten jetzt mit JavaScript -Modulen zusammen - unabhängig voneinander funktionierende Komponenten, die zusammenkommen, um als zusammenhängendes Ganze zu arbeiten, können jedoch gerne eine Komponente ersetzen lassen, ohne Armageddon zu verursachen. Viele von uns haben das AMD -Modulmuster verwendet und erfordern, dies ordentlich zu erreichen.

letztes Jahr schlug Browserify die Szene und brachte viel Aufregung auf. Während sich der Staub sich niedergelassen beginnt, wollte ich einen Überblick darüber schreiben, was Browserify ist, wie er funktioniert und einige Optionen zum Hinzufügen in Ihren Workflow.

Key Takeaways

• Browserify ermöglicht die Verwendung von Node.js -Stilmodulen direkt im Browser, indem sie Abhängigkeiten in eine einzelne JavaScript -Datei bündeln.
• Um Browserify zu verwenden, benötigen Sie Node.js, NPM (standardmäßig mit node.js installiert) und Browserify selbst, die global mit `npm install -g browserify`.
installiert werden können.
Browserify vereinfacht die Einbeziehung externer Bibliotheken in Ihrem Projekt durch Verwendung von `Request ()` Ähnlich wie node.js und kann auch Quellkarten für das einfachere Debuggen generieren.
Sie können den Browserify -Prozess mithilfe von NPM -Skripten oder Taskläufern wie Gulp und Grunzen automatisieren, wodurch die Effizienz der Workflow und die Reduzierung der manuellen Bündelungsbemühungen verstärkt werden.
Die Verwaltung von Abhängigkeiten in Browserify -Projekten wird mit einer `package.json` -Datei optimiert, die Projektdetails und erforderliche NPM -Pakete angibt, sodass andere das Projekt mit` NPM install`.
• einrichten können
Browserify ist mit ES6 -Modulen durch Transpilation mit Babel kompatibel und unterstützt Debugging mit Quellkarten, um auf Original -Quelldateien zurückzuverfolgen, um die Fehlerverfolgung zu verfolgen.

Mit

Warum Knotenmodule importieren?

Importieren von Modulen ist ein Segen. Anstatt eine Reihe von Websites zu besuchen, um Bibliotheken für Ihr JavaScript herunterzuladen, schließen Sie sie einfach mit Request () Anweisungen ein, stellen Sie sicher, dass die Module installiert wurden und Sie können loslegen. Häufig verwendete JavaScript -Bibliotheken wie JQuery, Undercore, Backbone und sogar Angular (als inoffizielle Verteilung) stehen zur Verfügung. Wenn Sie an einer Website arbeiten, auf der bereits Knoten ausgeführt werden, vereinfachen Sie die Dinge noch weiter, um alle Ihre JS zu strukturieren. Ich mag dieses Konzept wirklich.

was Sie benötigen

Um mit Browserify zu beginnen, benötigen Sie das minimale, das Sie benötigen:

• node.js
• npm - Dies wird standardmäßig mit Knoten installiert.
• Browserify - Ich werde erklären, wie Sie diese installieren.
• Eine Packung JavaScript -Module, die Sie zähmen können!

Erste Schritte

Um loszulegen, benötigen Sie auf Ihrem Computer einen Knoten und NPM installiert. Gehen Sie zu den obigen Links, wenn Sie nach Anleitungen suchen, um diese zu installieren. Wenn Sie total festgefahren sind, probieren Sie diese Anweisungen zur Installation von Node.js über Package Manager aus. Sie müssen keine Knotenarbeit ausführen, um Browserify zu verwenden. Wir installieren den Knoten ausschließlich, weil NPM davon ausführt. Sobald Sie NPM haben, können Sie Browserify mit dem folgenden Befehl installieren:

npm install -g browserify

Was wir hier tun, ist die Verwendung von NPM, um Browserify weltweit auf Ihrem Computer zu installieren (der -G fordert NPM an, ein Modul global zu installieren).

Wenn Sie einen Fehler erhalten, der mit Folgendem beginnt:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

Dann haben Sie ein Erlaubnisproblem. Sie können den Befehl sudo sudo, aber ich empfehle stattdessen diesen Beitrag.

Erstellen Ihrer ersten Browserify -Datei

Beginnen wir zunächst eine browserifizierte JavaScript -Datei, die ein äußerst beliebtes Modul importiert, unterstrichen. Wir werden Unterstiche verwenden, um Superman aufzuspüren. Ich habe meine JS -Datei main.js angerufen und in meinem Projekt in einem JS -Ordner platziert.

Wir starten mit der Zuweisung der _ Variablen an Unterstrich mithilfe von Browserify -Anweisung () in unserem JavaScript:

<span>var _ = require('underscore');</span>

Als nächstes verwenden wir jede () und find () Funktionen von Unscore. Wir werden zwei Namen von Namen durchsuchen und eine Konsole ausführen. Log, um zu sagen, ob es Superman sieht oder nicht. Hoch fortgeschrittenes Zeug, von dem Lex Luthor nur träumen konnte. Unser letztes Javascript -Code sieht folgendermaßen aus:

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

Wir möchten sicherstellen, dass das Browserify das NPM -Modul finden kann, wenn es versucht, es unserem Projekt hinzuzufügen. Bei den bloßen Grundlagen geht es darum, Ihr Terminal zu öffnen, zu dem Ordner zu navigieren, der Ihr JavaScript -Projekt hält, und dann diesen Befehl auszuführen, um Undercore in diesem Ordner zu installieren:

npm install underscore

Für diejenigen, die mit der Funktionsweise von Knoten und NPM nicht vertraut sind, erstellt dies einen Ordner namens node_modules in Ihrem Projekt, der den Code für Ihr Unterzahnmodul enthält. Der Befehl ruft die neueste Version von Undercore aus dem NPM -Repository unter https://registry.npmjs.org/underscore ab. Mit diesem Modul in unserem Ordner node_modules kann Browserify es jetzt finden und verwenden.

zum ersten Mal aus dem Browserify

npm install -g browserify

Dieser Befehl liest Ihre main.js -Datei und gibt sie in die von der Option -o definierte Datei findem.js aus. Ich habe die Option -D so eingesetzt, dass sie auch eine Quellkarte für uns generiert. Auf diese Weise können wir Main.js debuggen und sauber als separate Dateien unterstreichen.

Verwenden des Browserify -Ausgangs

Von dort aus ist es so einfach, die Datei wie jede andere JS -Datei auf Ihre Seite aufzunehmen:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

Importieren Sie Ihre eigenen JavaScript -Dateien

Es ist unwahrscheinlich, dass Ihre gesamte Anwendung aus Knotenmodulen stammt. Um Ihr eigenes JavaScript einzuschließen, können Sie die gleiche Erfordernisse () -Funktion verwenden. Die folgende Zeile von JavaScript importiert eine JS -Datei namens your_module.js in die GreatestModuleever -Variable:

<span>var _ = require('underscore');</span>

Um unser JavaScript wie dieses zu importieren, müssen wir nur unser JavaScript als Modul strukturieren. Dazu müssen wir modul.exports definieren. Eine Möglichkeit, dies zu tun, ist unten gezeigt.

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

Randnotiz!

Wenn Sie eine Reihe von JavaScript-Bibliotheken haben, die nicht in NPM sind und nach einer einfacheren Möglichkeit suchen, diese in Browserify zu bringen, können Sie das Browserify-Shim-NPM-Modul verwenden, um diese Dateien für Sie zu konvertieren . Wir werden es in diesem Artikel nicht verwenden, aber einige Entwickler könnten daran interessiert sein, dies auszuprobieren.

unser Beispiel mit einem Modul

Um ein einfaches Beispiel dafür zu geben, wie dies funktioniert, werden wir die Arrays aus dem vorherigen Superhelden -Suchbeispiel herausnehmen und sie durch ein separates JS -Modul ersetzen, das ein Array von Namen zurückgibt. Das Modul sieht aus wie:

npm install underscore

Als nächstes importieren wir dieses Modul in unseren Code mit names = Request ('./ names.js'):

browserify js/main.js -o js/findem.js -d

Unsere Namensvariablen verweisen auf die exportierte Funktion aus unserem Modul. Daher verwenden wir die obige Namensvariable als Funktion mit Klammern, wenn wir das Array von Namen an unsere Funktion findsuperman () übergeben.

Führen Sie diesen Browserify -Befehl aus Ihrer Befehlszeile noch einmal aus, um ihn zu kompilieren, öffnen Sie ihn in Ihrem Browser und es sollte wie erwartet ausgeführt werden, jeden Wert im Array durchsuchen und sich anmelden, unabhängig davon, ob er Superman sieht oder nicht:

in Variablen und Freigabemodulen in unserer App

npm install -g browserify

Ich habe einen Rückgabewert für unsere Funktion für findSuperman () hinzugefügt. Wenn es Superman findet, wird es wahr zurückkehren. Ansonsten wird es falsch zurückgegeben. Es liegt an dem Code, in dem dieses Modul verwendet wird, um zu entscheiden, wofür er diesen wahren/falschen Wert verwendet. Es gibt jedoch eine Sache, die wir im obigen Modul fehlen. Wir verwenden Underscore in unserer Funktion, haben es aber nicht deklariert. Wir können es auch im Modul selbst deklarieren wie so:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

Bei der Verwendung von Browserify werden alle Ihre JS -Dateien durchgesehen, die importiert werden, und importiert nur jedes Modul, das einmal erwähnt wird. Wir benötigen also Unterstrich in unserer Hauptdatei JS und in FindSuperman.js, aber wenn Browserify Packages alles aufpackt, wird es nur einmal in unsere endgültige JS -Datei eingebaut. Ziemlich ordentlich, richtig?

Unsere tatsächliche JavaScript -App wird jetzt unser neues Modul mit seinem neuen zurückgegebenen wahren/falschen Wert verwenden. Für Demo -Zwecke bleiben wir einfach an ein einfaches Dokument. Schreiben Sie, um zu sagen, ob es Superman aus unseren Namen gefunden hat:

<span>var _ = require('underscore');</span>

Wir müssen unterstreichen nicht mehr in unserer Haupt -JS -Datei importieren, damit Sie sie ohne Drama entfernen können. Es wird am Ende immer noch durch seine Aufnahme in die Datei findSuperman.js importiert.

Verwalten von Browserify -NPM -Abhängigkeiten mit package.json

Sagen Sie, Sie haben einen begeisterten Freund, der auch Ihren Code verwenden möchte. Es wäre ein bisschen schwer zu erwarten, dass sie wissen, dass sie zuerst das NPM -Unterstrich -Modul installieren müssen. Die Lösung hierfür ist es, eine Datei namens Package.json im Stamm Ihres Projekts zu erstellen. Diese Datei gibt Ihrem Projekt einen Namen (stellen Sie sicher, dass hier keine Leerzeichen im Namen enthalten sind), Beschreibung, Autor, Version und vor allem in unserem Fall - eine Liste von NPM -Abhängigkeiten. Für diejenigen, die sich mit Knoten entwickelt haben, verwenden wir hier genau das gleiche Zeug:

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

Die Liste der Abhängigkeiten ist derzeit auf unsere Single "Unterstrich" beschränkt: "1.6.x", bei der der erste Teil der Abhängigkeit der Name ist und der zweite Teil die Version ist. Neueste oder * wird die neueste Version NPM abrufen. Alternativ können Sie Zahlen wie 1.6 (für Version 1.6) und 1.6.x (für Versionen 1.6.0 bis, aber nicht einschließlich 1.7) einfügen.

npm

npm selbst kann Befehlszeilenskripte ausführen, genau wie die, die Sie manuell eingegeben haben. Geben Sie dazu einfach einen Skripteabschnitt in Ihr Paket ein. Json wie SO:

npm install -g browserify

Um das auszuführen, können Sie Folgendes in Ihre Befehlszeile eingeben:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

Aber das ist nicht bequem genug. Wir müssen diesen Befehl immer noch jedes Mal manuell ausführen. Das ist ärgerlich. Eine bessere Option ist die Verwendung eines NPM -Moduls namens Watchify. Watchify ist einfach, es ist einfach und es ist eine große Zeitsparung. Es wird nach Änderungen an Ihrem JS und nach dem automatischen Wiederaufführen von Browserify.

Um dies in unser paket.json zu bringen, werden wir es unseren DevDependenzen hinzufügen und ein neues Skript zum Anschauen unseres JS aufnehmen (lassen Datei).

<span>var _ = require('underscore');</span>

Um dies auszuführen, geben Sie einfach den folgenden Befehl ein.

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

Es wird seine Magie rennen und arbeiten. Es sagt jedoch nicht viel aus, Sie wissen zu lassen, was los ist, was verwirrend sein kann. Wenn Sie es bevorzugen, um Ihnen Details darüber zu geben, was es tut

npm install underscore

browserify js/main.js -o js/findem.js -d

<span><span><span><script</span> src<span>="js/findem.js"</span>></span><span><span></script</span>></span></span>

greatestModuleEver <span>= require('./your_module.js');</span>

module<span>.exports = function(vars) {
</span>  <span>// Your code
</span><span>}</span>

grunzen - um sicherzustellen, dass wir Grunzen für das Projekt installiert haben.
Grunzenbrowserify-Das Modul, mit dem Sie Browserify in Grunn ausführen können.
Grunz-Contrib-Watch-Das Modul, das unsere Dateien ansieht und Browserify jederzeit ausführt.

module<span>.exports = function() {
</span>  <span>return ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen', 'Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'];
</span><span>}</span>

<span>var _ = require('underscore'),
</span>  names <span>= require('./names.js');
</span>
<span>findSuperman(names());
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

module<span>.exports = function (values) {
</span>  <span>var foundSuperman = false;
</span>
  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>      foundSuperman <span>= true;
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span>
  <span>return foundSuperman;
</span><span>}</span>

<span>var _ = require('underscore');
</span>
module<span>.exports = function (values) {
</span>  <span>...</span>

lautet

npm install -g browserify

Unsere Browserify -Einstellungen werden als nächst

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

<span>var _ = require('underscore');</span>

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

gulp

gulp ist browserify's Boulevardliebhaber. Artikel rund um das Web kombinieren die beiden ziemlich oft, browserify und schlucken - der in den Himmel gemachte Aufbau -Prozess der neuesten JavaScript -Erstellung. Ich würde nicht sagen, dass Browserify -Fans Gulp verwenden müssen, es ist hauptsächlich eine persönliche Präferenz zwischen den verschiedenen Syntaxen. Sie können (wie Sie oben gesehen haben) NPM oder Grunn verwenden, um Ihre Browserify -Datei zu erstellen. Ich persönlich bin ein Fan des sauberen und einfachen NPM -Erstellungsprozesses für kleinere Projekte.

Um das oben genannte in Gulp zu erledigen, werden wir zunächst Gulp global installieren:

npm install underscore

browserify js/main.js -o js/findem.js -d

• gulp - das ziemlich wichtige Modul, um uns all diese Schlupfgüte zu geben!
• Vinyl-Source-Stream-Dies ist das Modul, das eine Eingabe aufnimmt und eine Datei zurückgibt, damit wir irgendwo einsetzen können.
BrowSerify verfügt über eine Streaming -API für die Ausgabe, die wir direkt in Gulp verwenden können. Eine Reihe von Leitfäden empfiehlt, das Gulp-Browserify-Plugin zu verwenden. Browserify empfehlen dies jedoch nicht und bevorzugt uns die Streaming-API-Ausgabe von Browserify. Wir verwenden Vinyl-Source-Stream, um diese Browserify-Ausgabe aufzunehmen und sie in eine Datei zu setzen, damit wir irgendwo ausgeben können.

Wir erstellen dann eine Datei namens Gulpfile.js im Stammpunkt unseres Projekts. Hier geht die gesamte Gulp -Funktionalität:

<span><span><span><script</span> src<span>="js/findem.js"</span>></span><span><span></script</span>></span></span>

• SourceFile - Der Ort und der Dateiname unserer Browserified -Datei (in diesem Fall js/main.js)
• destFolder - Der Ordnerspeicherort geben wir die endgültige Datei nach
aus
• destfile - Der Dateiname, den wir in unserer endgültigen Datei
haben sollen

Ich werde den Code im Folgenden ein wenig detaillierter erläutern.

Wie Browserify und Schluck zusammenarbeiten

Unsere erste Aufgabe ist unser Browserify, das wir so definieren:

npm install -g browserify

Es gibt zuerst unsere Main.js -Datei in das Browserify -NPM -Modul:

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

<span>var _ = require('underscore');</span>

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

npm install underscore

browserify js/main.js -o js/findem.js -d

<span><span><span><script</span> src<span>="js/findem.js"</span>></span><span><span></script</span>></span></span>

greatestModuleEver <span>= require('./your_module.js');</span>

module<span>.exports = function(vars) {
</span>  <span>// Your code
</span><span>}</span>

module<span>.exports = function() {
</span>  <span>return ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen', 'Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'];
</span><span>}</span>

<span>var _ = require('underscore'),
</span>  names <span>= require('./names.js');
</span>
<span>findSuperman(names());
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

module<span>.exports = function (values) {
</span>  <span>var foundSuperman = false;
</span>
  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>      foundSuperman <span>= true;
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span>
  <span>return foundSuperman;
</span><span>}</span>

<span>var _ = require('underscore');
</span>
module<span>.exports = function (values) {
</span>  <span>...</span>

npm install -g browserify

Schlussfolgerung

Es sind noch ziemlich frühe Tage für Browserify und es wird sich im Laufe der Zeit sicherlich entwickeln und reif. In seinem aktuellen Zustand ist es bereits ein sehr praktisches Werkzeug, um Ihr modulares JavaScript zu strukturieren, und ist besonders brillant für diejenigen, die den Knoten im Backend verwenden. Der Code wird für Knotenentwickler viel sauberer, wenn sie NPM -Module sowohl am vorderen als auch am hinteren Ende eines Projekts verwenden. Wenn Sie Browserify noch keinen Aufschlag gegeben haben, versuchen Sie es in Ihrem nächsten JavaScript -Projekt und prüfen Sie, ob es Ihre Welt rockt.

Andere Ressourcen

Es gibt eine Menge anderer Browserify -Ressourcen. Ein paar praktische Teile, die Sie sich vielleicht ansehen möchten:

• Das Browserify -Handbuch - James Hallidays ist so wertvolles Handbuch zum Start mit Browserify. Auf jeden Fall einen Lesen wert!
• GULP BROWSERIFIFIERT: Der alles Beitrag von Dan Tello - Wirklich gründlicher Artikel, der fortgeschrittenere Verwendungen zeigt.
• Und genau wie dieser Grunzen und Forderung ist nicht mehr um Schluck und Browserify - Martin Genev spricht über seine plötzliche Bekehrung in Browserify und Gulp mit einem Beispiel.
• Eine Einführung in gulp.js - Weitere Informationen zur Verwendung von Gulp von Craig Buckler.

häufig gestellte Fragen (FAQs) zum Start mit Browserify

Was ist der Hauptzweck des Browserify? Mit dem Browserify können Sie im Browser („Module“) benötigen, indem Sie alle Ihre Abhängigkeiten bündeln. Dieses Tool ist besonders nützlich, da Sie die meisten NPM -Pakete direkt im Browser verwenden können, was den Entwicklungsprozess erheblich beschleunigen kann. Im Gegensatz zu anderen Modulbundlern wurde Browserify speziell entwickelt, damit Entwickler Module im Stil von Node.JS für den Browser schreiben können. Dies geschieht durch rekursive Analyse aller Anforderungsaufrufe in Ihrer App, um ein Bündel zu erstellen, das Sie dem Browser in einem einzigen Skript -Tag dienen können. Browserify verfügt außerdem über ein reichhaltiges Plugin -Ökosystem, mit dem Sie Ihren Build in hohem Maße anpassen können.

Wie kann ich Browserify installieren? Paketmanager). Der Befehl hierfür ist "NPM Install -g -Browserify". Nach der Installation können Sie es aus der Befehlszeile verwenden, um Ihre JavaScript -Dateien zu bündeln.

Wie kann ich Browserify in meinem Projekt verwenden? Das CommonJS -Modulformat. Anschließend können Sie Browserify aus der Befehlszeile verwenden, um Ihre Haupt -JavaScript -Datei zusammen mit allen Abhängigkeiten in eine einzige Datei zu bündeln. Diese gebündelte Datei kann dann mit einem Skript -Tag in Ihrer HTML -Datei aufgenommen werden.

Kann ich ES6 -Module mit Browserify verwenden? . Sie können dies tun, indem Sie Babel und die Babelify -Transformation installieren und diese dann in Ihrem Browserify -Befehl verwenden. Verwenden Sie die meisten NPM -Pakete direkt im Browser. Dazu müssen Sie das Paket zunächst mit NPM installieren. Dann können Sie das Paket in Ihrer JavaScript -Datei benötigen, und Browserify sorgt dafür, dass es in Ihrem Bundle enthalten ist. Verwenden Sie Ihren Code. Beispielsweise können Sie die Babelify -Transformation verwenden, um Ihren ES6 -Code in ES5 -Code zu kompilieren. Transformationen können global oder auf bestimmte Dateien angewendet werden, und Sie können mehrere Transformationen in Ihrem Projekt verwenden.

Wie kann ich meinen gebündelten Code debuggen? Karten, die Ihnen helfen können, Ihren gebündelten Code zu debuggen. Um eine Quellkarte zu generieren, können Sie die Option "–Debug" in Ihrem Browserify -Befehl verwenden. Dies enthält Quellzuordnungsdaten in Ihr Bundle, die dann von den Entwickler -Tools des Browsers verwendet werden können, um Ihren Code zu debuggen. 🎜> Ja, Sie können Browserify mit Aufgabenläufern wie Gulp oder Grunzen verwenden. Sowohl Gulp als auch Grunt haben Plugins zur Verfügung, mit denen Browserify in Ihren Build -Prozess integriert werden kann. Dies kann dazu beitragen, Ihre JavaScript -Dateien zu bündeln.

Wie kann ich mein Bündel für die Produktion optimieren? Eine übliche Methode besteht darin, Ihr Bundle mithilfe eines Tools wie UglifyJs zu minimieren. Sie können auch das Plugin "Tinyify" verwenden, ein Browserify -Plugin, das verschiedene Optimierungen für Ihr Bundle anwendet, um es so klein wie möglich zu machen.

Das obige ist der detaillierte Inhalt vonErste Schritte mit Browserify. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!