标题重写为：Modul kelihatan seperti modul WebAssembly, tetapi ia tidak dibenderakan sedemikian untuk pek web.

Question

Saya cuba mengimport modul WebAssembly (ditulis dalam Rust dan disusun menggunakan wasm-pack) dalam projek Vue saya. Apa yang saya lakukan ialah mencipta projek:

vue-cli create my-vue-webasm-proj

Saya memilih Vue 2.之后我像这样修改了我的main.js（添加了async beforeCreate()）：<

/* main.js */

import Vue daripada 'vue'
import Apl daripada './App.vue'

Vue.config.productionTip = palsu

Vue baharu({
  render: h => h(Apl),
  async beforeCreate() {
    const wlib= tunggu import('my-webasm-lib')
    console.log(wlib)
  },
}).$mount('#app')

在 npm runserve 之后我收到此错误：

Penghuraian modul gagal: Aksara tidak dijangka '' (1:0)
Modul ini kelihatan seperti modul WebAssembly, tetapi modul tidak dibenderakan sebagai modul WebAssembly untuk webpack.
PERUBAHAN PECAH: Memandangkan webpack 5 WebAssembly tidak didayakan secara lalai dan dibenderakan sebagai ciri percubaan.
Anda perlu mendayakan salah satu percubaan WebAssembly melalui 'experiments.asyncWebAssembly: true' (berdasarkan modul async) atau 'experiments.syncWebAssembly: true' (seperti webpack 4, ditamatkan).
Untuk fail yang transpile kepada WebAssembly, pastikan anda menetapkan jenis modul dalam bahagian 'module.rules' bagi konfigurasi (cth. 'type: "webassembly/async"').
(Kod sumber ditinggalkan untuk fail binari ini)

如何修复它？

我尝试将此配置添加到 webpack.config.js 中，正如所说的那样，但没有成功：

module.exports = {
  percubaan: {
    asyncWebAssembly: benar,
    importAsync: benar
  }
}

我的 package.json 如果如下：

...
"kebergantungan": {
  "core-js": "^3.8.3",
  "my-webasm-lib": "fail:../my-webasm-lib/my-webasm-lib-pkg",
  "vue": "^2.6.14"
},
"devDependencies": {
  "@babel/core": "^7.12.16",
  "@babel/eslint-parser": "^7.12.16",
  "@vue/cli-plugin-babel": "~5.0.0",
  "@vue/cli-plugin-eslint": "~5.0.0",
  "@vue/cli-service": "~5.0.0",
  "eslint": "^7.32.0",
  "eslint-plugin-vue": "^8.0.3",
  "vue-template-compiler": "^2.6.14"
},
...

            

Answer 1

Agak lewat untuk menjawab, tetapi mungkin ia akan membantu seseorang.

module.exports = {
  runtimeCompiler: true,
  configureWebpack: {
    externals: {
      experiments: {
        asyncWebAssembly: true,
      },
    },
  },
};