js导入找不到wasm文件答案

【问题标题】：js import not finding wasm filejs导入找不到wasm文件
【发布时间】：2019-11-27 16:16:39
【问题描述】：

我正在努力从 rust 构建以下 wasm 示例：

example

我已经执行了

货物建造

它通过 target/debug/ 文件中的 libdom.d 和 libdom.so 文件解决。

应用程序以给定开始

npm 运行服务

但是当js尝试在线导入wasm文件时会抛出错误：

import('./pkg/dom')

结果是

> @ serve /home/kamil/projects/dom
> webpack-dev-server

????  Checking for wasm-pack...

ℹ️  Installing wasm-pack 

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/kamil/projects/dom
ℹ ｢wdm｣: wait until bundle finished: /
wasm-pack error: undefined
✖ ｢wdm｣: Hash: d6af309c4a2560e4a081
Version: webpack 4.36.1
Time: 21666ms
Built at: 07/18/2019 6:53:10 PM
     Asset       Size  Chunks             Chunk Names
index.html  226 bytes          [emitted]  
  index.js    360 KiB    main  [emitted]  main
Entrypoint main = index.js
[0] multi (webpack)-dev-server/client?http://localhost ./index.js 40 bytes {main} [built]
[./index.js] 133 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.77 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.63 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
    + 18 hidden modules

ERROR in ./index.js
Module not found: Error: Can't resolve './pkg/dom' in '/home/kamil/projects/dom'
 @ ./index.js 3:0-19
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 372 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 528 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Failed to compile.

没有./pkg/dom 文件夹。我不知道如何生成它，也不知道里面应该有什么。

【问题讨论】：

pkg/dom文件是否存在？
没有。忘了提那个。我不知道如何生成它，也不知道里面应该有什么。
您是否下载了 dom 示例文件夹中的所有内容？我刚刚做了，运行yarn，然后运行yarn serve，它可以正常工作并生成 pkg 文件夹和文件。
是的，我什么都有。你为什么用纱线？我不熟悉它。我认为货物足以建造这个。
我已经用纱线尝试过这种方法（干净拉动）。结果还是一样。

标签： javascript node.js rust webassembly

【解决方案1】：

index.js 文件正在尝试import('./pkg')，它不存在。您可以通过运行wasm-pack build 来生成此文件夹。这样做之后，您应该有一个 ./pkg 文件夹，其中包含 wasm 二进制文件和 JS 包装器代码。有关命令的更多信息，请参阅wasm-pack README。

使用 Rust，很容易调用 cargo build 并期望它创建 wasm 二进制文件，但是 wasm-pack 实际上是 doing a lot more 在引擎盖下。但最终，wasm-pack build 确实调用了cargo build。

【讨论】：