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

正如您在这里所读到的：我试图弄清楚如何在Vue.js中导入由emscripten生成的模块，以便调用其方法

以下是在此处找到的指示：我使用以下命令编译了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>

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

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

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_plupping.js文件中手动添加“export”的任何建议

1°更新）

以下是答案的提示：

我以这种方式编译add.c文件：

<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>

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>

添加
结果：{{Result}}

从“/js\u”导入模块
导出默认值{
数据（）{
返回{
结果：空
}
},
方法：{
callAdd（）{
const实例=模块({
onRuntimeInitialized（）{
log（实例添加（1,2））；
this.result=instance.\u添加（1,2）；
}
})
}
}
}

一定是我做错了什么，因为我在单击添加时得到了console.log！按钮，但输出不会传输到Result.vue的html部分：

---

这一问题的另一个优秀解决方案是由《网络组装在行动中》一书的作者Gerard Gallant找到的。

这一问题的另一个优秀解决方案是由《网络组装在行动中》一书的作者Gerard Gallant找到的。

@curiousdannii我在这里描述了我的问题。我提前感谢您对解决方案的贡献。这是否回答了您的问题@AnthumChris我更新了我的问题（1°更新），并输出了我根据您的建议所做的修改indications@curiousdannii我在这里描述了我的问题。我提前感谢您对解决方案的贡献。这是否回答了您的问题@胡迪我更新了我的问题（1°更新），我根据你的指示做了修改，考虑关闭，如果不是在他们的代码库上的一个开放的问题，考虑关闭，如果不是他们的代码库上的一个开放问题。

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