Question

我使用

创建了一个类型为cdylib的Rust库

cargo web build --target=wasm32-unknown-unknown

我使用＆＃34; rust-wasm-loader＆＃34;的修改版本。用于构建和加载WASM文件的NPM包。 rust-wasm-loader使用它作为使用Rust代码的方法：

const wasm = require('./main.rs')
wasm.initialize().then(module => {
    // Use your module here 
    const doub = module.cwrap('doub', 'number', ['number'])
    console.log(doub(21))
})

每次我想使用代码时，我都不想初始化模块。如何加载模块并像库一样使用它？

Answer 1

创建一个执行初始化并重新导出promise的包装器JS模块似乎是最简单的方法。

// main.js
module.exports = require("./main.rs").initialize().then(module => {
  return {
    doub: module.cwrap('doub', 'number', ['number'])
  };
});

然后可以做任何事情

require("./main.js").then(api => {
  console.log(api.doub(21));
});

并且将始终获得相同的模块。或者您可以反转异步部分并执行

// main.js
const api = require("./main.rs").initialize().then(module => {
  return {
    doub: module.cwrap('doub', 'number', ['number'])
  };
});

exports.doub = async function (val) {
  return (await api).doub(val);
};

然后您的模块的用户可以

const api = require("./main.js");
api.doub(21).then(result => {
  console.log(result);
});

Answer 2

由于WebAssembly的加载是异步的，并且实际上可能需要一些时间来处理大型模块，因此您需要在未加载模块时处理状态，然后让其他应用程序知道何时加载WebAssembly模块。 / p>

您没有说明您在Vue应用程序中处理状态的方式，但如果您是使用Vuex你可以做这样的事情：

const doubPlugin = store => {
  wasm.initialize().then(module => {
    const doub = module.cwrap('doub', 'number', ['number'])

    store.subscribe((mutation, state) => {
      if (mutation.type === 'DOUB_REQUEST') {
        store.commit('DOUB_RESULT', doub(mutation.payload))
      }
    })

    store.commit('DOUB_READY')
  })
}

const store = new Vuex.Store({
  state,
  mutations,
  plugins: [doubPlugin]
})

我在Elm / WebAssembly应用程序（relevant JavaScript）中做了类似的事情，所以如果你想看看如何在实践中应用它，你可以检查出来。

Answer 3

我创建了一个类来包装WebAssembly，并为每个函数创建一个cwrap：

class mkLib {
  ready = false
  _mod = require("./main.rs").initialize().then(module => {
    this._mod = module
    this.doub = module.cwrap('doub', 'number', ['number'])
    this.ready = true
  })

}
export default mkLib

在Vue组件的data中，有一个新类的变量，在watch我等待ready属性的更改：

data () {
  return {
    mod: new mkLib,
    ready: false
  }
},
watch: {
  'mod.ready': function () {
    this.ready = true
    // now this.mod.FUNC(PARAMS) can be used
    console.log(this.mod.doub(20))
  }
}

如何在不每次初始化模块的情况下在Vue组件中加载WASM模块？

3 个答案: