javascript - 使webfontloader与node.js和jsdom一起使用

我的webfontloader在浏览器上下文中运行良好。现在，我试图查看是否可以在node.js + jsdom上下文中使用它，特别是因为webfontloader可作为npm module使用。

我已经使node + jsdom能够提供合理的输出，因此我知道该部分正在运行。但是，当我尝试集成webfontloader来启用Web字体时，我没有遇到麻烦。

基本上，我使用的是自述文件中所述的webfontloader模块，它是:

var WebFont = require('webfontloader');

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

但是，请尽我所能，出现以下错误:

我可以从jsdom中获取一个window对象:

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

但是，如何在该上下文中将win传递到webfontloader中以用作window？

也许我展示了我的天真，并问了不可能的事情。

最佳答案

除非您有充分的理由不这样做，否则我建议您使用jsdom.env或jsdom.jsdom将webfontloader加载到jsdom中，方法是使用Google托管库中托管的version或自己托管它。使用jsdom.env看起来像这样:

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']
            }
        });
    }
);

如果您确实需要从Node.js上下文中要求webfontloader，据我所知，不能将webfontloader传递给窗口作为参数，但是您可以通过在库中添加几行来轻松地规避此问题。

运行npm install webfontloader

打开“node_modules/webfontloader/webfontloader.js”

将“webfontloader.js”的内容包含在module.exports函数中，该函数采用window对象作为参数。

该文件可能看起来与此类似(不粘贴整个webfontloader库源代码):

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;
};

我确实将module.exports临时存储在一个变量中，以确保我们可以多次以这种方式要求该模块，因为webfontloader库将替换module.exports对象。

您可以要求这样的库而不会出现任何错误:

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']
        }
    });

});