vue3 项目如何调用 webassembly 里的函数?

Question

我用了一个叫做talib_binding的库,使用了最简单的代码:

import * as talib from 'talib-binding'

talib.SAR(
    [2, 3, 4, 5], /* inHigh */
    [1, 2, 3, 4], /* inLow */
    0.02, /* optAcceleration_Factor, optional */
    0.2, /* optAF_Maximum, optional */
    0, /* startIdx, optional */
    3 /* endIdx, optional */
)

但是终端返回:

Failed to compile.

./node_modules/talib-binding/build/Release/talib_binding.node 1:2 Module parse failed: Unexpected character '�' (1:2) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

需要手动创建一个 webpack.config.js 文件吗?怎么处理最好?
谢谢

我的 vue.config.js 内容如下:

// for WebAssembly
module.exports = {
    chainWebpack: (config) => {
        config.module
            .rule("wasm")
            .test(/\.wasm$/)
            .use("wasm-loader")
            .loader("wasm-loader")
            .end();
    },
};

不知道配置的有没有问题?

Answer 1

webpack 文档：loaders里的第一句：

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

你引入了另外的文件（后缀名不是 .js 或 .json），但是没有引入与之配套的 loader，webpack就无法处理它。
学习一下如何配置 loader，然后配置一个就行了。