Как загрузить файл веб-сборки в Vue?

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);
                        }
                    });
                });
            }
        }   
    },
}

Это внутри функции, которую я вызываю на событие клика. Я могу разработать весь процесс, если кому-то интересно. Это не должно занимать так много времени ни у кого, я надеюсь, что это поможет другим, кто искал решение. Я понимаю, что не правильно изложил проблему в этом посте, скоро обновлю все должным образом.