Ich bin neu in NodeJS und Browserify. Ich habe mit diesem Link angefangen .
Ich habe die Datei main.js, die diesen Code enthält
var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
this.LogData =function(){
console.log(unique(data));
};
Jetzt installiere ich das Uniq-Modul mit npm:
npm install uniq
Dann bündle ich alle erforderlichen Module ab main.js mit dem Befehl browserify in einer einzigen Datei namens bundle.js:
browserify main.js -o bundle.js
Die generierte Datei sieht folgendermaßen aus:
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
this.LogData =function(){
console.log(unique(data));
};
},{"uniq":2}],2:[function(require,module,exports){
"use strict"
function unique_pred(list, compare) {
var ptr = 1
, len = list.length
, a=list[0], b=list[0]
for(var i=1; i<len; ++i) {
b = a
a = list[i]
if(compare(a, b)) {
if(i === ptr) {
ptr++
continue
}
list[ptr++] = a
}
}
list.length = ptr
return list
}
function unique_eq(list) {
var ptr = 1
, len = list.length
, a=list[0], b = list[0]
for(var i=1; i<len; ++i, b=a) {
b = a
a = list[i]
if(a !== b) {
if(i === ptr) {
ptr++
continue
}
list[ptr++] = a
}
}
list.length = ptr
return list
}
function unique(list, compare, sorted) {
if(list.length === 0) {
return []
}
if(compare) {
if(!sorted) {
list.sort(compare)
}
return unique_pred(list, compare)
}
if(!sorted) {
list.sort()
}
return unique_eq(list)
}
module.exports = unique
},{}]},{},[1])
Wie rufe ich die logData-Funktion auf, nachdem ich die Datei bundle.js in meine index.htm-Seite aufgenommen habe?
node.js
npm
browserify
SharpCoder
quelle
quelle
Antworten:
Mit browserify können Sie standardmäßig nicht von außerhalb des browserifizierten Codes auf die Module zugreifen. Wenn Sie Code in einem browserifizierten Modul aufrufen möchten, sollten Sie Ihren Code zusammen mit dem Modul browserifizieren. Beispiele hierfür finden Sie unter http://browserify.org/ .
Natürlich können Sie Ihre Methode auch explizit von außen zugänglich machen:
Dann können Sie
LogData()
von überall auf der Seite anrufen .quelle
onclick="someFunction()"
. Sie können unmöglich argumentieren, dass dies ein seltener Anwendungsfall ist!?!Der Schlüssel zum Bündeln von eigenständigen Modulen mit Browserify ist die
--s
Option. Es macht alles verfügbar, was Sie aus Ihrem Modul exportieren, indem Sie Knotenmodule.exports
als globale Variable verwenden. Die Datei kann dann in ein<script>
Tag aufgenommen werden.Sie müssen dies nur tun, wenn Sie aus irgendeinem Grund diese globale Variable verfügbar machen müssen. In meinem Fall benötigte der Client ein eigenständiges Modul, das in Webseiten aufgenommen werden konnte, ohne dass er sich um dieses Browserify-Geschäft kümmern musste.
Hier ist ein Beispiel, in dem wir die
--s
Option mit dem Argument verwendenmodule
:Dadurch wird unser Modul als globale Variable mit dem Namen verfügbar gemacht
module
.Quelle .
Update: Danke an @fotinakis. Stellen Sie sicher, dass Sie vorbei sind
--standalone your-module-name
. Wenn Sie vergessen, dass--standalone
ein Argument erforderlich ist, generiert Browserify möglicherweise stillschweigend ein leeres Modul, da es nicht gefunden werden konnte.Hoffe das spart dir etwas Zeit.
quelle
Die Antwort von @Matas Vaitkevicius mit der eigenständigen Option von Browserify ist korrekt (die Antwort von @ thejh unter Verwendung der globalen Fenstervariablen funktioniert ebenfalls, aber wie andere angemerkt haben, verschmutzt sie den globalen Namespace, sodass sie nicht ideal ist). Ich wollte etwas mehr Details zur Verwendung der Standalone-Option hinzufügen.
Stellen Sie im Quellenskript, das Sie bündeln möchten, sicher, dass Sie die Funktionen verfügbar machen, die Sie über module.exports aufrufen möchten. Im Client-Skript können Sie diese offengelegten Funktionen über <Bündelname>. < Funktionsname > aufrufen . Hier ist ein Beispiel:
Meine Quelldatei src / script.js hat Folgendes :
module.exports = {myFunc: func};
Mein browserify-Befehl sieht ungefähr so aus:
browserify src/script.js --standalone myBundle > dist/bundle.js
Und mein Client-Skript dist / client.js lädt das gebündelte Skript
<script src="bundle.js"></script>
und ruft dann die exponierte Funktion wie folgt auf :
<script>myBundle.myFunc();</script>
Es ist nicht erforderlich, den Bundle-Namen im Client-Skript zu benötigen, bevor die bereitgestellten Funktionen aufgerufen werden. Dies ist z. B.
nicht erforderlich und funktioniert nicht.<script src="bundle.js"></script><script>var bundled = require("myBundle"); bundled.myFunc();</script>
Genau wie alle Funktionen, die von browserify ohne Standalone-Modus gebündelt werden, ist die Funktion require außerhalb des gebündelten Skripts nicht verfügbar . Mit Browserify können Sie einige Knotenfunktionen clientseitig verwenden, jedoch nur im mitgelieferten Skript . Es ist nicht dazu gedacht, ein eigenständiges Modul zu erstellen, das Sie überall auf der Clientseite importieren und verwenden können. Deshalb müssen wir uns um all diese zusätzlichen Probleme kümmern, um nur eine einzelne Funktion außerhalb des gebündelten Kontexts aufzurufen.
quelle
myBundle
an das Fensterobjekt angehängt,window.myBundle.myFunc()
anstatt an window.myFunc ()Ich habe gerade die Antworten durchgelesen und es scheint, als hätte niemand die Verwendung des globalen Variablenbereichs erwähnt. Dies ist nützlich, wenn Sie denselben Code in node.js und im Browser verwenden möchten.
Dann können Sie überall auf die TestClass zugreifen .
Hinweis: Die Testklasse wird dann überall verfügbar. Dies entspricht der Verwendung der Fenstervariablen.
Darüber hinaus können Sie einen Dekorator erstellen, der eine Klasse für den globalen Bereich verfügbar macht. Das ist wirklich schön, macht es aber schwierig zu verfolgen, wo eine Variable definiert ist.
quelle
global
erzeugt das Hinzufügen der Funktion zu den gleichen Effekt wie das Hinzufügen zuwindow
, der bereits von thejh behandelt wurde. Diese Antwort fügt keine neuen Informationen hinzu.return {}
aber lassen Sie die öffnende geschweifte Klammer in die nächste Zeile fallen.Lesen Sie README.md von browserify über
--standalone
Parameter oder google "browserify umd".quelle
So stellen Sie Ihre Funktion sowohl im HTML-Code als auch im serverseitigen Knoten zur Verfügung:
main.js:
main.html:
Lauf:
und Sie sollten beim Öffnen von main.html in einem Browser dieselben Ergebnisse erzielen wie beim Ausführen
quelle
Minimal lauffähiges Beispiel
Dies ist im Grunde dasselbe wie: https://stackoverflow.com/a/43215928/895245, jedoch mit konkreten Dateien, mit denen Sie es einfach ausführen und einfach selbst reproduzieren können.
Dieser Code ist auch verfügbar unter: https://github.com/cirosantilli/browserify-hello-world
index.js
index.html
Verwendung von Node.js:
out.js
Für die Verwendung im Browser generieren :Sowohl der Browser als auch die Befehlszeile zeigen die erwartete Ausgabe an:
Getestet mit Browserify 16.5.0, Node.js v10.15.1, Chromium 78, Ubuntu 19.10.
quelle
exports.myfunc.= myfunc
Teil davon war absolut kritisch und wurde in anderen Antworten übersehen.Sie haben einige Möglichkeiten:
Lassen Sie das Plugin browserify-bridge die Module automatisch in ein generiertes Eingabemodul exportieren. Dies ist hilfreich für SDK-Projekte oder Situationen, in denen Sie nicht manuell mit dem Export Schritt halten müssen.
Folgen Sie einem Pseudo-Namespace-Muster für die Roll-up-Belichtung:
Ordnen Sie Ihre Bibliothek zunächst so an, indem Sie die Indexsuche für Ordner nutzen:
Mit diesem Muster definieren Sie den Eintrag wie folgt:
In Ihren Unterordnern können Sie einfach ein ähnliches Manifest der verfügbaren Module in diesem Kontext einfügen:
Dieses Muster lässt sich sehr gut skalieren und ermöglicht eine kontextbezogene (Ordner für Ordner) Verfolgung dessen, was in der aufgerollten API enthalten sein soll.
quelle
Es ist wirklich einfach - bei diesem ganzen Konzept geht es um das Verpacken
1. Alternative - Objekt "this"
Zu diesem Zweck gehe ich davon aus, dass Sie "nur 1 Skript für die gesamte App {{app_name}}" und "1 Funktion {{Funktionsname}}" haben.
füge die Funktion {{Funktionsname}} zum Objekt "this" hinzu
Dann müssen Sie das Objekt benennen, um verfügbar zu sein. Anschließend fügen Sie den Parameter "Standalone with Name" hinzu, wie von anderen empfohlen
Wenn Sie also "watchify" mit "browserify" verwenden, verwenden Sie diese Option
oder Befehlszeile
dann können Sie Ihre Funktion über den Browser aufrufen
2. Alternative - Objekt "Fenster"
füge die Funktion {{Funktionsname}} zum Objekt "Fenster" hinzu
dann können Sie Ihre Funktion über den Browser aufrufen
- -
Vielleicht helfe ich jemandem
quelle
Rufen Sie die Funktion einfach über auf
LogData(data)
Dies ist nur eine geringfügige Änderung der Antwort von thejh, aber eine wichtige
quelle
Zu Debugging-Zwecken habe ich diese Zeile zu meiner code.js hinzugefügt:
Dann könnte ich alles auch außerhalb des Bundles laufen lassen.
quelle