在服务器和客户端的共享代码中呈现画布界面

Question

我正在尝试编写使用 HTML 画布的共享代码（在服务器和客户端上运行）。

在客户端上，这应该可以正常工作。在服务器上，Node 没有画布（或 DOM），所以我想使用 node-canvas 插件：https://github.com/Automattic/node-canvas。

但是，我无法找到一种不会使 webpack 尝试将 node-canvas 捆绑到我的客户端代码中的方法来访问它（这会使 webpack 崩溃）。有没有什么方法可以加载节点画布，这样我就可以使用在浏览器中使用的相同代码来引用它，并且不会让 webpack 严重崩溃？

---

我目前的努力，没有奏效：

canvas.server.js

import Canvas from 'canvas';

const createCanvas = (width, height) => new Canvas(width, height);

export default createCanvas;

canvas.client.js

const createCanvas = (width, height) => {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;

  return canvas;
};

export default createCanvas;

canvas.js

let createCanvas;

if (typeof document === 'undefined') {
  // SERVER/node
  createCanvas = require('./canvas.server.js');
} else {
  // BROWSER
  createCanvas = require('./canvas.client.js');
}

export default createCanvas;

使用中：

import createCanvas from './canvas';

const canvasElement = createCanvas(width, height);
const ctx = canvasElement.getContext('2d');

不幸的是，webpack 仍然捆绑在 node-canvas 中。

Answer 1

您是否尝试仅要求 node-canvas when the code is running in node？

如果你在前端代码中没有实际调用 require，webpack 不会捆绑它。这意味着在上述条件语句中调用实际的require，而不是在文件顶部。这个很重要。另外，请确认您没有将 node-canvas 作为 webpack 的入口点。

例子：

// let's assume there is `isNode` variable as described in linked answer
let canvas;
if (isNode) {
  const Canvas = require('canvas');
  canvas = new Canvas(x, y);
else {
  canvas = document.getElementById('canvas');
}
// get canvas context and draw on it

OP 提供代码示例后编辑：

我已经在this WebpackBin 中复制了确切的结构，以证明这应该按照上面的说明工作。毕竟，这是 common.js（和其他模块加载器）的特性，因此在 webpack 中得到支持。

我对代码的更改：

1. 将 canvas.client.js 和 canvas.server.js 中的代码替换为 console.log 将在该行调用的代码
2. 修复了require 与export default 的错误使用（应该是require(...).default）。无关紧要，但必须这样做才能使代码正常工作。
3. 删除了canvasElement.getContex 调用。在示例代码中不起作用并且无论如何都无关紧要，因此没有必要模拟它。