如何使Rust Game of Life WebAssembly成为静态网站？

问题描述

我已经阅读了《 Rust Game of Life》的教程，并且在网络浏览器中有一款可以正常运行的游戏，但是它只能从随附的演示Web服务器上运行。我可以使用npm start启动服务器，它在端口8080上运行webpack-dev-server。当我通过该端口访问站点时，它可以正常工作。但是，如果我尝试将站点复制到Apache之类的Web服务器，它将无法正确加载。我目前从中得到的错误是：

Error importing `index.js`: TypeError: Error resolving module specifier “wasm-game-of-life”. Relative module specifiers must start with “./”,“../” or “/”. bootstrap.js:5:23
<anonymous> http://www.north-winds.org/gol/bootstrap.js:5

在本教程中，网站的根是存储库中名为www/的文件夹，Rust程序生成的wasm模块位于pkg/下。 www/node_modules/wasm-game-of-life中有一个指向../../pkg/的符号链接，我已经用顶层pkg/文件夹的实际副本替换了该符号链接，以使网站完全包含在其中www/文件夹，然后将该文件夹放在我的网站http://www.north-winds.org/gol/上，但是，访问该文件夹将返回上面的错误。我需要修改什么才能使其独立运行？

据我了解，此WebAssembly生活游戏基本上是一个独立的客户端应用程序，除了可以提供带有适当的MIME类型的静态文件的Web服务器之外，不需要任何其他内容。我认为没有什么特别的要求。我确实在某处提到了WebSockets，但我不知道为什么此应用程序需要这样做。我将其与https://webassembly.org/中C的“ Hello，World” WebAssembly示例进行了比较，最后得到了一个从C源代码生成的.wasm文件，以及一个执行该脚本的JavaScript和HTML支持文件。只需将其复制到静态Web服务器位置，文件即可正常工作。这就是我想要的Rust示例。

Rust游戏人生的一些相关代码如下。顶级HTML文件包括以下内容：

<script src="./bootstrap.js"></script>

引导JavaScript文件仅包含以下内容：

import("./index.js")
  .catch(e => console.error("Error importing `index.js`:",e));

它引用的index.js文件在Wasm的其他粘合逻辑中具有以下特征：

import { Universe,Cell } from "wasm-game-of-life";                             
                                                                            
// Import the WebAssembly memory at the top of the file.                        
import { memory } from "wasm-game-of-life/wasm_game_of_life_bg";                

要使此功能独立运行还缺少什么？

解决方法

www和pkg文件夹包含您需要的源文件，但是您还没有静态站点。 create-wasm-app模板使用Webpack，因此您需要通过在npm run build文件夹中运行www来构建最终输出。这将创建一个名为dist的子文件夹，其中包含可以放置在Web服务器上的实际静态文件。