サーバーとクライアントの両方で共有コードにキャンバスインターフェイスを表示する

Question

HTMLキャンバスを使用する共有コード（サーバーとクライアントの両方で実行される）を作成しようとしています。

クライアントでは、これは完全に正常に動作するはずです。サーバーでは、Nodeにキャンバス（またはDOM）がないため、ノードキャンバスのプラグインを使用したいと考えています。https://github.com/Automattic/node-canvas。

しかし、私はwebpackにノードキャンバスをクライアントサイドのコード（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のは、まだノードキャンバスにバンドルされています。

Answer 1

node-canvaswhen 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でサポートされています。コードへ

マイ変化：（require(...).defaultする必要があります）export defaultとrequireの固定間違った使用

その行で呼ばれるであろうもののconsole.logでcanvas.client.jsとcanvas.server.jsでコードを置き換え

1. 。無関係ですが、コードを動作させるためにはそれを行わなければなりませんでした。
2. canvasElement.getContexコールを削除しました。サンプルコードではうまくいかず、とにかく無関係なので、それを嘲笑する必要はありません。