标题重写为: Das Modul scheint ein WebAssembly-Modul zu sein, ist aber für Webpack nicht als solches gekennzeichnet.

Question

Ich versuche, ein WebAssembly-Modul (in Rust geschrieben und mit wasm-pack kompiliert) in mein Vue-Projekt zu importieren. Ich habe ein Projekt erstellt:

vue-cli create my-vue-webasm-proj

Ich habe mich für Vue 2 entschieden.之后我像这样修改了我的main.js（添加了async beforeCreate()）：

/* main.js */

Vue aus 'vue' importieren
App aus „./App.vue“ importieren

Vue.config.produktionTip = false

neues Vue({
  rendern: h => h(App),
  async beforeCreate() {
    const wlib= waiting import('my-webasm-lib')
    console.log(wlib)
  },
}).$mount('#app')

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

Modulparse fehlgeschlagen: Unerwartetes Zeichen '' (1:0)
Das Modul scheint ein WebAssembly-Modul zu sein, aber das Modul ist nicht als WebAssembly-Modul für Webpack gekennzeichnet.
BREAKING ÄNDERUNG: Seit Webpack 5 ist WebAssembly nicht standardmäßig aktiviert und als experimentelle Funktion gekennzeichnet.
Sie müssen eines der WebAssembly-Experimente über „experiments.asyncWebAssembly: true“ (basierend auf asynchronen Modulen) oder „experiments.syncWebAssembly: true“ (wie Webpack 4, veraltet) aktivieren.
Stellen Sie bei Dateien, die nach WebAssembly transpiliert werden, sicher, dass Sie den Modultyp im Abschnitt „module.rules“ der Konfiguration festlegen (z. B. „type: „webassembly/async““).
(Der Quellcode wurde für diese Binärdatei weggelassen)

如何修复它？

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

module.exports = {
  Experimente: {
    asyncWebAssembly: true,
    importAsync: true
  }
}

我的 package.json 如果如下:

...
"Abhängigkeiten": {
  „core-js“: „^3.8.3“,
  „my-webasm-lib“: „Datei:../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

回答有点晚了，但也许对某人有帮助。

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