Vue中如何加载webassembly文件？

Question

我已经使用这个命令编译了 C 代码 emcc add.c -o js_plumbing.js -s -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap'] -s MODULARIZE=1

这是我的 Vue 组件代码 -

 public instance:any = {
      ready: new Promise(resolve => {
        Module({
          onRuntimeInitialized() {
            this.instance = Object.assign(this, {
              ready: Promise.resolve()
            });
            resolve();
          }
        });
      })
    };


    public draw_outline() {
       this.instance.ready
      .then(_ => this.result_web = this.instance.addTwoNumbers(2,2));
    }

draw_outline 在我单击文本元素时被调用。

这是我遇到的错误 -

所以在这个错误之后我去生成文件并且只是将导出添加到模块并且这个错误消失了。但现在我在 C "addTwoNumbers" 中的函数没有从实例中调用。

如果我打印我得到的实例值有谁知道如何从这里开始？

Answer 1

我想在编译时我需要使用 USE_ES6_IMPORT_META=0 标志，这样 WebAssembly 模块将使用旧版本的 import.meta.url 代码行用于不识别导入样式的系统。所以命令看起来像 emcc add.c -o js_plumbing.js -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap'] -s ENVIRONMENT='web,worker' -s EXPORT_ES6=1 -s MODULARIZE=1 -s USE_ES6_IMPORT_META=0

这是我更新后的代码 -

 Module().then(myModule => {  
        const result = myModule.ccall('addTwoNumbers',
            'number',
            ['number', 'number'],
            [4, 6]);
         console.log("Value from wasm file", result);
        });

我的配置文件 -

const path = require('path');
const contentBase = path.resolve(__dirname, '..', '..');

module.exports = {
    configureWebpack: config => {

        config.devServer = {
            before(app) {
                // use proper mime-type for wasm files
                app.get('*.wasm', function (req, res, next) {
                    var options = {
                        root: contentBase,
                        dotfiles: 'deny',
                        headers: {
                            'Content-Type': 'application/wasm'
                        }
                    };
                    res.sendFile(req.url, options, function (err) {
                        if (err) {
                            next(err);
                        }
                    });
                });
            }
        }   
    },
}

它在我调用点击事件的函数中。如果有人感兴趣，我可以详细说明整个过程。任何人都不应该花这么多时间，我希望它能帮助其他一直在寻找解决方案的人。我发现我在这个post中没有正确说明问题，我会尽快更新这里的所有内容。

Vue中如何加载webassembly文件？

How to load webassembly file in Vue?

vue.js

jwasm