首页 > 解决方案 > Node-Canvas 在 Angular Universal 服务器构建上崩溃?

问题描述

我正在构建一个 Angular Universal 服务器。但是,该应用程序需要 Phaser。它包含在 isOnBrowser 检查中,但渲染器仍在构建 Phaser 本身。

因为 Phaser 需要画布,这会导致一大堆错误——其中大部分是可以绕过的。我已经安装了 node-canvas,但是 npm 现在正在构建服务器输出的这一部分:

/*!
 * Canvas - Context2d
 * Copyright (c) 2010 LearnBoost <tj@learnboost.com>
 * MIT Licensed
 */

const bindings = __webpack_require__(256)
const parseFont = __webpack_require__(259)
const { DOMMatrix } = __webpack_require__(260)

bindings.CanvasRenderingContext2dInit(DOMMatrix, parseFont)
module.exports = bindings.CanvasRenderingContext2d

据我所知, webpack_require_256 指向节点画布本身,因此构建似乎可能无法正常工作。

它报告的错误是

TypeError: bindings.CanvasRenderingContext2dInit is not a function

我已经尝试删除 node_modules 并使用 npm install 重新安装,但似乎没有任何效果。它由 jsdom 实例化,并设置了以下全局变量:

// Express server
const app = express();
const jsdom = require('jsdom');
const window = new jsdom('<!doctype html><html><body></body></html>');
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');

global['window'] = window;
global['document'] = window.document;
global['performance'] = {};
global['navigator'] = { userAgent: 'Custom' };

canvas 和 jsdom 安装使用以下版本:

“画布”:“^2.3.1”,“jsdom”:“^16.2.1”

还有什么我可以尝试的吗?

标签: javascriptnode.js

解决方案


推荐阅读