Kann die Funktion des Moduls nach browserify

nicht aufrufen Ich versuche, einfache Seite mit JS-Modul zu machen, die etwas mit der Seite tun wird. Ich muss die Module von node.js verwenden, damit ich lerne, wie man browsers funktioniert.Kann die Funktion des Moduls nach browserify

Mein HTML:

<!doctype html> 
<html> 
    <head> 
     <script src="js/bundle.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <p>Hello world!</p> 
    <script type="text/javascript"> 
     var test = require("./test.js"); 
     test.init(); 
    </script> 
    </body> 
</html>

Das ist mein JavaScript (test.js):

"use strict"; 

alert("here1"); 

var init = function() { 
    alert("here2"); 
} 

exports.init = init

Ich mache ein Bündel mit:

browserify.cmd test.js -o bundle.js

Wenn ich Beim Versuch, die Seite zu öffnen, wird "here1" angezeigt, aber "here2" wird nicht angezeigt. Konsole im Browser sehe ich:

Uncaught ReferenceError: require is not defined  index.html:9

Irgendwelche Ideen, wie gut funktionieren Moduls Funktion (init) machen?

Quelle

2016-04-08 Valentin Pimenov

weil erfordern keine native js Funktion ist, sollte es in Ihrem test.js wie die verwendet werden, ist das, was browserify verwendet, um Ihre Module zu bündeln – ronster37

Aber wie kann ich Zugriff auf die Funktion haben, die in test.js von der html/embedded js definiert ist? –

Sie müssen den gesamten JavaScript-Code, der etwas von Node enthält, in die Datei test.js einfügen, die Sie dann mit dem browserify in te bundle.js konvertieren. In Ihrem Beispiel verwenden Sie eine Knotenfunktion require in der index.html, die nicht konvertiert wird. Der Browser sieht dann die Funktion require(), die er nicht kennt und in der das Problem versteckt ist.

Einfach gesagt: all Ihre JavaScript-Code (mit Knoten) muss in Ihrem index.html als eine einzige bundle.js enthalten sein, die ein browserisiertes Ergebnis von Ihren Quelldateien ist.

EDIT

Browserify nicht (Standardeinstellung) können Sie aus dem browserified Code jede browserified Funktion aufzurufen. Sie können es jedoch verfügbar machen, indem Sie die Funktion in den Bereich window einfügen.

Dies ist test.js (die dann zu bundle.js von umgewandelt wird browserify) und index.html

"use strict"; 
 

 
alert("here1"); 
 

 
window.init = function() { 
 
    alert("here2"); 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <script src="js/bundle.js" type="text/javascript"></script> 
 
</head> 
 

 
<body> 
 
    <p>Hello world!</p> 
 
    <script type="text/javascript"> 
 
\t init(); 
 
    </script> 
 
</body> 
 

 
</html>

Quelle

2016-04-08 23:03:54

Das Hauptproblem, das ich nicht verstehe, wie man Zugriff auf die Funktion hat, die in test.js definiert ist (wenn es browserifiziert wird) von html/eingebetteter js. –

Aha! Die Notwendigkeit, es von eingebettetem Code aus aufzurufen, war in der anfänglichen Frage nicht klar. Ich habe die Antwort bearbeitet, sie kann durch Anfügen der Funktion in den Fensterbereich erstellt werden. –

Kann die Funktion des Moduls nach browserify

Antwort

Verwandte Themen