Browserify - Aufrufen einer Funktion, die in einer durch browserify im Browser generierten Datei gebündelt ist

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?

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:

window.LogData =function(){
  console.log(unique(data));
};

Dann können Sie LogData()von überall auf der Seite anrufen .

Der Schlüssel zum Bündeln von eigenständigen Modulen mit Browserify ist die --sOption. Es macht alles verfügbar, was Sie aus Ihrem Modul exportieren, indem Sie Knoten module.exportsals 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 --sOption mit dem Argument verwenden module:

browserify index.js --s module > dist/module.js

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 --standaloneein Argument erforderlich ist, generiert Browserify möglicherweise stillschweigend ein leeres Modul, da es nicht gefunden werden konnte.

Hoffe das spart dir etwas Zeit.

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. <script src="bundle.js"></script><script>var bundled = require("myBundle"); bundled.myFunc();</script>nicht erforderlich und funktioniert nicht.

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.

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.

class Test
{
  constructor()
  {
  }
}
global.TestClass = Test;

Dann können Sie überall auf die TestClass zugreifen .

<script src="bundle.js"></script>
<script>
var test = new TestClass(); // Enjoy!
</script>

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.

Lesen Sie README.md von browserify über --standaloneParameter oder google "browserify umd".

So stellen Sie Ihre Funktion sowohl im HTML-Code als auch im serverseitigen Knoten zur Verfügung:

main.js:

var unique = require('uniq');

function myFunction() {
    var data = [1, 2, 2, 4, 3];
    return unique(data).toString();
}
console.log ( myFunction() );

// When browserified - we can't call myFunction() from the HTML, so we'll externalize myExtFunction()
// On the server-side "window" is undef. so we hide it.
if (typeof window !== 'undefined') {
    window.myExtFunction = function() {
        return myFunction();
    }
}

main.html:

<html>
    <head>
        <script type='text/javascript' src="bundle.js"></script>
    <head>
    <body>
        Result: <span id="demo"></span>
        <script>document.getElementById("demo").innerHTML = myExtFunction();</script>
    </body>
</html>

Lauf:

npm install uniq
browserify main.js > bundle.js

und Sie sollten beim Öffnen von main.html in einem Browser dieselben Ergebnisse erzielen wie beim Ausführen

node main.js

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

const uniq = require('uniq');

function myfunc() {
  return uniq([1, 2, 2, 3]).join(' ');
}
exports.myfunc = myfunc;

index.html

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Browserify hello world</title>
</head>
<body>
<div id="container">
</body>
</div>
<script src="out.js"></script>
<script>
document.getElementById('container').innerHTML = browserify_hello_world.myfunc();
</script>
</html>

Verwendung von Node.js:

#!/usr/bin/env node

const browserify_hello_world = require('./index.js');

console.log(browserify_hello_world.myfunc());

out.jsFür die Verwendung im Browser generieren :

npx browserify --outfile out.js --standalone browserify_hello_world index.js

Sowohl der Browser als auch die Befehlszeile zeigen die erwartete Ausgabe an:

1 2 3

Getestet mit Browserify 16.5.0, Node.js v10.15.1, Chromium 78, Ubuntu 19.10.

Sie haben einige Möglichkeiten:

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

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

/src
--entry.js
--/helpers
--- index.js
--- someHelper.js
--/providers
--- index.js
--- someProvider.js
...

Mit diesem Muster definieren Sie den Eintrag wie folgt:

exports.Helpers = require('./helpers');
exports.Providers = require('./providers');
...

Beachten Sie, dass die Anforderung die Datei index.js automatisch aus dem jeweiligen Unterordner lädt

In Ihren Unterordnern können Sie einfach ein ähnliches Manifest der verfügbaren Module in diesem Kontext einfügen:

exports.SomeHelper = require('./someHelper');

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.

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

function {{function_name}}(param) {}
->
this.{{function_name}} = function(param) {}

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

var b = browserify({
    ...
    standalone: '{{app_name}}'
});

oder Befehlszeile

browserify index.js --standalone {{app_name}} > index-bundle.js

dann können Sie Ihre Funktion über den Browser aufrufen

{{app_name}}.{{function_name}}(param);
window.{{app_name}}.{{function_name}}(param);

2. Alternative - Objekt "Fenster"

füge die Funktion {{Funktionsname}} zum Objekt "Fenster" hinzu

function {{function_name}}(param) {}
->
window.{{function_name}} = function(param) {}

dann können Sie Ihre Funktion über den Browser aufrufen

{{function_name}}(param);
window.{{function_name}}(param);

- -

Vielleicht helfe ich jemandem

window.LogData =function(data){
   return unique(data);
};

Rufen Sie die Funktion einfach über auf LogData(data)

Dies ist nur eine geringfügige Änderung der Antwort von thejh, aber eine wichtige

Zu Debugging-Zwecken habe ich diese Zeile zu meiner code.js hinzugefügt:

window.e = function(data) {eval(data);};

Dann könnte ich alles auch außerhalb des Bundles laufen lassen.

e("anything();");