Browserify - So können Sie nicht öffentlich erworbene Skripts von Drittanbietern einbinden

8

Ich bin neu zu browserifizieren und seine Verwendung ist mir nicht völlig klar, obwohl die Vorteile überzeugend scheinen.

Ich habe ein paar Fragen und hoffte, dass jemand klären könnte.

  1. Ich habe Blogposts über die Verwendung von browserify-shim in package.json gesehen, um Bibliotheken von Drittanbietern wie jquery und bootstrap einzubinden. Ich habe auch Posts gesehen, wo Tools wie Schluck verwendet werden, um die Bundle-Datei zu generieren. Ich kann keine gute Antwort darauf finden, warum browserify-shim erforderlich ist, wenn Tools wie Schluck den Prozess automatisieren können. Kann jemand bitte etwas Licht abwerfen? Warum wird browserify-shim überhaupt benötigt? Ich fühle, dass die Schlucklösung ein wenig sauberer ist, obwohl ein wenig mehr beteiligt. Es wird package.json nicht mit browserify-spezifischen Dingen verseuchen, die eine Build-Sache sind und daher zusammen mit Schluck (nur meiner persönlichen Meinung) gehen.

  2. Wie geht man mit Bibliotheken von Dritten um, die nicht in npm und auch nicht öffentlich sind? Zum Beispiel kaufen wir ein Skript von einer dritten Partei. Dieses Skript ist keine gewöhnliche js, sondern eine reguläre js-Datei mit einigen Abhängigkeiten (zB jquery und undscore).

sat 28.09.2014, 18:20
quelle

1 Antwort

15

Browserifizieren ermöglicht es Ihnen, die Welt des Knotens zu nutzen und für die Bereitstellung an einen Browser zu bündeln. Es versteht Knotenmodule, die Abhängigkeiten über CommonJS require -Anweisungen definieren.

Aber was ist, wenn Sie einen JS-Code oder eine Bibliothek haben, die nicht als Knotenmodul definiert ist und nicht CommonJS unterstützt? Geben Sie browserify-shim ein. Es bietet einen Shim-Wrapper für jedes Skript, wie Ihr privates Drittanbieter-Skript, so dass es als ein Knotenmodul definiert und verwendet werden kann, das Browserify versteht.

Die Verwendung von browserify-shim ist völlig orthogonal zu wie Sie Browserify ausführen. Es gibt grundsätzlich zwei Möglichkeiten: A) Verwenden Sie die Befehlszeilen-API von Browserify oder B) Verwenden Sie die JS API von Browserify .

Die Verwendung eines Build-Tools wie Gulp impliziert die zweite Option, da Sie die JS-API von Browserify verwenden würden in Ihrem Gulp Build-Skript (zB gulpfile.js). Viele Leute bevorzugen die Verwendung von Gulp, weil es ein gutes Ökosystem von Plugins hat, mit denen Sie viel mehr tun können, als nur Browserify aufzurufen (z. B. CoffeeScript kompilieren, SASS kompilieren, JSHint ausführen usw.).

Also, um Ihre spezifischen Fragen zu beantworten:

  1. Browserify-shim ist nur erforderlich, wenn JS-Code, der nicht ist, als Node / CommonJS-Modul geschrieben wird, das Sie über Browserify bündeln müssen. Um dies zu tun, müssen Sie browserify-shim mitteilen, welche Dateien als Module (und welche Abhängigkeiten sie haben) in package.json shim. Beachten Sie, dass dies völlig unabhängig von Gulp ist; also wirst du es brauchen, ob du Gulp benutzt oder nicht.

  2. Was Sie beschreiben, ist der perfekte Anwendungsfall von browserify-shim. Fügen Sie Ihre Drittanbieter-Skripts in Ihr Projekt ein, konfigurieren Sie die Dateien als Module in package.json gemäß der Dokumentation von b-shim, require sie in Ihrem Code und führen Sie Browserify aus, um sie mit Ihrem Code zu bündeln. Sie können sie auch einzeln bündeln, sie in ihr eigenes Projekt einfügen, usw. - wie auch immer Sie es strukturieren möchten.

Ein paar Dinge zu beachten:

  • Sie können so ungefähr jede JS-Bibliothek shimmen.
  • Das Shimmen einer JS-Bibliothek als Knotenmodul ändert den globalen Bereich in einen privaten Bereich. Hoffentlich ist alles in der Bibliothek Namespaced, so dass alle seine Funktionen als ein einzelnes Modul exportiert werden können, aber wenn dies nicht der Fall ist, müssen Sie den Shimmed-Code möglicherweise ändern, um Dinge explizit an window anzuhängen (was einfach, aber nicht empfohlen ist). oder teilen Sie den Code in separate Dateien / Module auf.
  • Sowohl Browserify als auch Gulp verwenden Streams in ihrer JS-API, aber Browserify verwendet native Node-Streams, während Gulp Vinyl Streams verwendet. Da sie nicht gut zusammenspielen, müssen Sie wahrscheinlich Vinyl-Source-Stream verwenden Passe Gulp an Browserify an (zB um Dateien in einer Browserify-Pipeline umzubenennen), oder verwende Vinyl-Transformation , um Browserify anzupassen Gulp (z. B. einen Browserify-Stream für die Verwendung in einer Gulp-Pipeline umschließen).
superEb 28.09.2014, 19:51
quelle

Tags und Links