让 webfontloader 与 node.js 和 jsdom 一起工作

Question

我有 webfontloader working nicely within a browser context. Now I'm trying to see whether I can get it working in a node.js + jsdom context, particularly since webfontloader is available as an npm module.

我已经让 node + jsdom 工作以提供合理的输出，所以我知道这部分工作正常。但是当我尝试集成 webfontloader 以启用 web 字体时，我就解脱了。

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

var WebFont = require('webfontloader');

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

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

ReferenceError: window is not defined

我可以从 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？

可能是我太天真了，问了不可能的事。

Answer 1

除非您有充分的理由不这样做，否则我宁愿建议您加载托管在 Google 托管库上的 webfontloader into jsdom with jsdom.env or jsdom.jsdom, either using the 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']
            }
        });
    }
);

如果你真的需要从 nodejs 上下文中请求 webfontloader，据我所知，不能将 window 作为参数传递给 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']
        }
    });

});

让 webfontloader 与 node.js 和 jsdom 一起工作

Getting webfontloader to work with node.js and jsdom

javascript

node.js

webfont-loader