gpt4 book ai didi

javascript - 如何在 Vue.js 中加载 emscripten 生成的模块以使用其功能?

转载 作者:行者123 更新时间:2023-12-01 00:19:32 39 4
gpt4 key购买 nike

您可以在此处阅读:https://forum.vuejs.org/t/wasm-how-to-correctly-call-a-webassembly-method-in-vue-js/83422/24我正在尝试弄清楚如何在 Vue.js 中导入 emscripten 生成的模块以调用其方法。

按照此处找到的指示进行操作:How load an emscripten generated module with es6 import?我用以下命令编译了 add.c:

emcc add.c -o js_plumbing.js -s EXPORTED_FUNCTIONS="['_Add']" -s  
EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap'] -s EXPORT_ES6=1 -s
MODULARIZE=1

并以这种方式相应地修改 Result.vue:

<template>
<div>
<p button @click="callAdd">Add!</p>
<p>Result: {{ result }}</p>
</div>
</template>

<script>
import Module from './js_plumbing'
const mymod = Module();
export default {
data () {
return {
result: null
}
},
methods: {
callAdd() {
const result = mymod.cwrap('Add',
'number',
['number', 'number'],
[1, 2]);
this.result = result;
}
}
}
</script>

但是我收到了这个错误:

Failed to compile.

./src/components/js_plumbing.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token, expected ( (3:25)

1 |
2 | var Module = (function() {
> 3 | var _scriptDir = import.meta.url;
| ^
4 |
5 | return (
6 | function(Module) {

enter image description here

我发现导入 emscripten 生成的模块并使用其功能的唯一方法是使用某种“黑客”:在 js_plumbing_js(通过编译 add.js 生成的 javascript 文件)的模块定义中手动添加“export”关键字。 c 与:

emcc add.c -o js_plumbing.js -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap'] -s 
ENVIRONMENT='web','worker'

结果.vue:

<template>
<div>
<p button @click="callAdd">Add!</p>
<p>Result: {{ result }}</p>
</div>
</template>

<script>
import * as js_plumbing from './js_plumbing'
import Module from './js_plumbing'
export default {
data () {
return {
result: null
}
},
methods: {
callAdd () {
const result = js_plumbing.Module.ccall('Add',
'number',
['number', 'number'],
[1, 2]);
this.result = result;
}
}
}
</script>

js_plumbing.js:

// Copyright 2010 The Emscripten Authors.  All rights reserved.
// Emscripten is available under two separate licenses, the MIT license and the
// University of Illinois/NCSA Open Source License. Both these licenses can be
// found in the LICENSE file.

// The Module object: Our interface to the outside world. We import
// and export values on it. There are various ways Module can be used:
// 1. Not defined. We create it here
// 2. A function parameter, function(Module) { ..generated code.. }
// 3. pre-run appended it, var Module = {}; ..generated code..
// 4. External script tag defines var Module.
// We need to check if Module already exists (e.g. case 3 above).
// Substitution will be replaced with actual code on later stage of the build,
// this way Closure Compiler will not mangle it (e.g. case 4. above).
// Note that if you want to run closure, and also to use Module
// after the generated code, you will need to define var Module = {};
// before the code. Then that object will be used in the code, and you
// can continue to use Module afterwards as well.
export var Module = typeof Module !== 'undefined' ? Module : {};

enter image description here

但是,正如我所说,我不喜欢这种手动破解。关于如何使模块可导出、从而可导入,而不需要在 js_plumbing.js 文件中手动添加“export”,有什么建议吗?

1°更新)

按照此处答案的指示:How to call a webassembly method in vue.js?

我是这样编译add.c文件的:

emcc add.c -o js_plumbing.js -s MODULARIZE=1

然后修改Result.vue如下:

<template>
<div>
<p button @click="callAdd">Add!</p>
<p>Result: {{ result }}</p>
</div>
</template>

<script>
import Module from './js_plumbing'
export default {
data () {
return {
result: null
}
},
methods: {
callAdd() {
const instance = Module({
onRuntimeInitialized() {
console.log(instance._Add(1,2));
this.result = instance._Add(1,2);
}
})
}
}
}
</script>

肯定是我做错了什么,因为我在单击“添加!”时确实收到了 console.log!按钮,但输出没有传输到 Result.vue 的 html 部分: enter image description here

最佳答案

import Module from './js_plumbing';

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

export default {
data () {
return {
result: null
};
},
methods: {
callAdd(a, b) {
instance.ready
.then(_ => this.result = instance._Add(a, b));
}
}
};

关于javascript - 如何在 Vue.js 中加载 emscripten 生成的模块以使用其功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59530889/

39 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com