Sveltekit bwip-js 二维码

Question

这可能是一个新手问题（不理解 Nodejs、浏览器和 React 代码之间的区别）。我正在使用 bwipjs-js 在我的 sveltekit 应用程序中生成二维码。我在我的

myqr.ts

文件中使用 bwipjs （toCanvas(...) 方法）。

它工作正常并生成二维码。但是跑步

yarn unit.test

生成以下错误。

Property 'toCanvas' does not exist on type 'typeof BwipJs'.

    1190     bwipjs.toCanvas(tempCanvas, qrOptions);

yarn unit-test

必须通过才能使代码投入生产。

我尝试以不同的方式导入 bwip-js，如下所示：

// import bwipjs from 'bwip-js';
import * as bwipjs from 'bwip-js';
// import { gs1_128 } from 'bwip-js';

用于生成二维码的代码：

    let tempCanvas = document.createElement('canvas') as HTMLCanvasElement;
    try {
        bwipjs.toCanvas(tempCanvas, qrOptions);
        // const generateQR = async () => (await gs1_128(qrOptions));
        // qrImage.setAttribute('xlink:href', generateQR());    
    } catch (e) {
        console.error('Error creating QR.', extract400Error(e));
    }

如果我使用第三个选项 import

{ gs1_128 } from 'bwip-js';

，那么在运行测试时不会抛出错误，但在运行代码时会引发错误（换句话说，它不会运行/生成二维码）。

我可以在 bwip-js 文档中看到有关 React 用法的信息，其中使用了这个 toCanvas 方法。

我不知道如何解决这个问题。我应该在这里使用哪个版本（节点、浏览器、react、浏览器 ES6）？我实际上不知道这里发生了什么。

我可以看到文件中存在 toCanvas(...) 方法

'node_modules/bwip-js/dist/bwip-js.d.ts,'

。

非常感谢您的解释和解决方案。

Answer 1

看来，那个

    import * as bwipjs from 'bwip-js';

查看 bwip-js 的

package.json

并分别为 typescript 编译器和生成的 javascript 代码导入不同的文件：编译器针对

bwip-js-node.d.ts

进行编译，由于某种原因，它不包含

toCanvas

函数，而编译后的代码包含

bwip-js.d.ts

，有这个功能。

只要 bwip-js 作者不修复它，以下解决方法就对我有用：

    import * as bwipjs from 'bwip-js';
    ...
    (bwipjs as any).toCanvas(...);