Wie kann 'require' dem Browser zur Verfügung gestellt werden, wenn browserify von innerhalb von gulp verwendet wird?

8

Wenn ich eine Datei x.js habe, die wie folgt aussieht:

x.js

%Vor%

und ich führe browserify von der Kommandozeile wie folgt aus:

%Vor%

Ich erhalte eine Ausgabedatei, die ungefähr so ​​aussieht:

%Vor%

Dann in meinem Browser-Code kann ich dies tun:

%Vor%

Ich habe tatsächlich zwei Fragen:

1) Dies funktioniert nicht ganz im Browser Ich bekomme den Fehler: "Uncaught Error: Modul './x.js' nicht gefunden". Warum passiert das?

2) Ich möchte das eigentlich im Schluck mit Vinyl-Source-Stream abspielen. Ich habe versucht, so etwas in meinem gulpfile zu tun, aber es funktioniert nicht. Irgendwelche Ideen? Ich bekomme den Fehler 'require is not defined'

%Vor%     
asolberg 20.06.2014, 14:32
quelle

2 Antworten

7

Update: Sie können auf einen Alias ​​in Ihrem Schalter -r

verweisen

Versuchen Sie: browserify -r ./x.js:my-module > bundle.js

Und auf Ihrer Seite: var x = require('my-module');

HINWEIS: Wenn Sie einen Schalter -r auf einem Knotenmodul wie fs oder bis verwendet haben, benötigen Sie für diese keinen Alias, da sie normalerweise einen Namen haben in ihrer package.json Datei.

Siehe node-browserify - extern erfordert für weitere Informationen.

Wenn Sie Ihre x.js so bündeln wollen (mit der Option -r), gibt es ein paar Optionen

1) Nehmen Sie das Skript in Ihre HTML-Seite und bündeln Sie es separat.

Erstellen Sie eine main.js -Datei und fügen Sie Ihr JS hinzu.

Verwenden Sie browserify -x ./x.js > main.js

Mit der Option -x verbindet Browserify Ihre bundle.js als Abhängigkeit.

Dann referenzieren Sie beide JS-Dateien auf Ihrer Seite.

2) Verwenden Sie den von Browserify generierten Namen.

var x = require('0+DPR/');

Siehe Aktualisieren oben, um einen Alias ​​zu erstellen.

Gute Ressource unten, da Sie mit Gulp weiter gehen wollen

Für mehr Gulp + Browserify (verwendet auch Watchify für Liveload) Schau dir den Blog-Beitrag auf Viget an

mikekidder 28.06.2014 05:30
quelle
4

Eigentlich bist du ziemlich nah dran, bis auf zwei Dinge:

  1. Sie müssen Ihre 'x.js' mit einem exponierten Namen versehen, den Sie später () verwenden können, z. B .: 'x' ist in Ihrem Fall eine gute Wahl

  2. anstelle von require('./x.js'); sollten Sie require('x');

  3. verwenden

Um Ihnen die volle Antwort zu geben:

in lib/x.js

%Vor%

in gulpfile.js

%Vor%

in einem HTML-Dokument ( index.html )

%Vor%

Ein paar Details zum Schluckrezept:

Ich habe vinyl-transform anstelle von vinyl-source-stream verwendet.

Sie können vinyl-source-stream verwenden, aber Sie müssen daran denken, später in vinyl-buffer zu pipen, wenn Sie mehr Transformationen mit Plugins haben, die auf gepufferten Vinyl-Dateiobjekten funktionieren (anstatt das Vinyl-Dateiobjekt zu streamen, das vinyl-source-stream gibt aus)

Was vinyl-transform macht ist, dass es sowohl gepufferte als auch streaming Vinyl-Datei-Objekte für Sie erledigt.

    
Hafiz Ismail 13.08.2014 15:13
quelle