7

我有webfontloader在浏览器上下文中运行良好。现在我想看看我是否可以让它在node.js + jsdom上下文中工作，特别是因为 webfontloader 可以作为npm 模块使用。

我已经让 node + jsdom 工作以提供合理的输出，所以我知道那部分正在工作。但是当我尝试集成 webfontloader 来启用网络字体时，我就陷入了困境。

基本上，我使用的是自述文件中记录的 webfontloader 模块，即：

var WebFont = require('webfontloader');

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

但尽我所能，我得到以下错误：

ReferenceError：未定义窗口

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

            // 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在该上下文中使用？

也许我表现出我的天真，并要求不可能。

4

1 回答 1

1

除非您有充分的理由不这样做，否则我宁愿建议您使用 或 将 webfontloader 加载到jsdom中，或者使用托管在 Google Hosted Libraries 上的版本或自己托管。使用它看起来像这样：jsdom.envjsdom.jsdomjsdom.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']
            }
        });
    }
);

如果您确实需要 nodejs 上下文中的 webfontloader ，据我所知 webfontloader 不能将窗口作为参数传递，但是您可以通过向库中添加几行来轻松规避这一点。

  1. 跑npm install webfontloader
  2. 打开“node_modules/webfontloader/webfontloader.js”
  3. 将“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']
        }
    });

});
于 2015-12-28T01:01:52.890 回答