2015-12-22 5 views
7

Ich habe webfontloader funktioniert gut in einem Browser-Kontext. Jetzt versuche ich zu sehen, ob ich es in einem node.js + jsdom Kontext arbeiten kann, besonders seit webfontloader als npm module verfügbar ist.Webfontloader funktioniert mit node.js und jsdom

Ich habe Knoten + jsdom arbeiten, um vernünftige Ausgabe zu liefern, damit ich weiß, dass Teil funktioniert. Aber wenn ich versuche, webfontloader zu integrieren, um Web-Fonts zu aktivieren, komme ich nicht weiter.

Im Grunde, wie ich bin mit webfontloader Modul in der Readme dokumentiert, das ist:

var WebFont = require('webfontloader'); 

WebFont.load({ 
    google: { 
    families: ['Droid Sans', 'Droid Serif'] 
    } 
}); 

Aber versuchen Sie, wie ich kann, erhalte ich folgende Fehlermeldung:

ReferenceError: window is not defined

ich eine window bekommen Objekt von jsdom:

  // Get the document and window 
      var doc = jsdom.jsdom('<!doctype html><html><body><div id="container"></div></body></html>'), 
       win = doc.defaultView; 

Aber wie gehe ich win in webfontloader zur Verwendung als window in diesem Kontext?

Vielleicht zeige ich meine Naivität und frage das Unmögliche.

+0

haben Sie versucht, die WebFont im jsdom.env Laden (....) Kontext? –

+0

Haben Sie die Antwort unten versucht? – cviejo

+0

Noch nicht. Entschuldigung, ich hatte noch keine Chance. Es sieht jedoch durchaus plausibel aus und ich freue mich darauf, es auszuprobieren. Danke für die ausführliche Antwort. – drmrbrewer

Antwort

1

Es sei denn, Sie haben einen guten Grund dies nicht zu tun, ich würde eher empfehlen Sie webfontloader in jsdom mit jsdom.env oder jsdom.jsdom, entweder mit der version gehostet auf Google Laden Hosted Bibliotheken oder es selbst hosten. Mit jsdom.env es würde wie folgt aussehen:

var jsdom = require("jsdom"); 

jsdom.env( 
    '<!doctype html><html><body></body></html>', 
    ['https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js'], 
    function(err, win) { 

     var WebFont = win.WebFont; 

     WebFont.load({ 
      google: { 
       families: ['Droid Sans', 'Droid Serif'] 
      } 
     }); 
    } 
); 

Wenn Sie wirklich webfontloader von einem NodeJS Kontext müssen verlangen, soweit ich webfontloader kein Fenster als Parameter übergeben werden kann sagen können, aber Sie können dies umgehen einfach durch Hinzufügen von ein paar Zeilen zur Bibliothek.

  1. Run npm install webfontloader
  2. Open "node_modules/webfontloader/webfontloader.js"
  3. Setzen Sie den Inhalt von "webfontloader.js" in einer module.exports Funktion, die ein window Objekt als Parameter übernimmt.

    module.exports = function(window){ 
    
        var exportsBackup = module.exports; 
    
        /* Web Font Loader v1.6.16 - (c) Adobe Systems, Google. License: Apache 2.0 */ 
        (function(){function aa(a,b,c){r ... 
    
        var loaderObject = module.exports; 
        module.exports = exportsBackup; 
    
        return loaderObject; 
    }; 
    

    Ich lagere vorübergehend module.exports in einer Variablen, um sicherzustellen, wir das Modul auf diese Weise mehrere Male erfordern können: (nicht einfügen ganze webfontloader Bibliothek Quelle)

Die Datei so aussehen könnte , da die Webfontloader-Bibliothek das Objekt module.exports ersetzt.

Sie können die Bibliothek wie diese erfordern ohne Fehler:

var jsdom = require("jsdom"); 

jsdom.env("https://nodejs.org/", [], function(err, win) { 

    var WebFont = require('webfontloader')(win); 

    WebFont.load({ 
     google: { 
      families: ['Droid Sans', 'Droid Serif'] 
     } 
    }); 

}); 
+0

Mit dem raffinierten Vorschlag, 'webfontloader 'zu bearbeiten.js' um die Weitergabe von 'window' als Parameter zu ermöglichen, kann ich jetzt so weit gehen, die Funktion' WebFont.load() 'ohne den Referenzfehler aufzurufen. Aber jetzt bekomme ich genau das gleiche Problem wie hier beschrieben: http://stackoverflow.com/q/34163339/4070848 - mit anderen Worten, das versuchte Laden von Webfont erreicht immer den "inaktiven" Zweig und wird nie erfolgreich geladen . Können Sie einen Webfont erfolgreich mit 'jsdom' laden? Und ich habe versucht, einen benutzerdefinierten 'userAgent' an' jsdom' zu übergeben, um webfontloader zu versuchen, ohne Erfolg. – drmrbrewer

+0

Ok, ich werde einen Blick darauf werfen. Aber zuerst, guten Rutsch ins neue Jahr! – cviejo

+0

Frohes neues Jahr (fast!) Auch ... einige sind im neuen Jahr, andere nicht ganz! – drmrbrewer