1 个不稳定版本

0.1.7	2023年7月7日

#1204 在 WebAssembly

在 3 个库中使用（2 个直接使用）

MIT 许可证

14KB
107 行

wasmdev

使用Rust编写的Web前端简单开发

// src/main.rs
#[wasmdev::main]
fn main() {
    let window = web_sys::window().unwrap();
    let document = window.document().unwrap();
    let body = document.body().unwrap();
    let val = document.create_element("p").unwrap();
    val.set_text_content(Some("Hello World"));
    body.append_child(&val).unwrap();
}

cargo run

Compiling my-web-app
 Finished dev [unoptimized + debuginfo] target(s)
  Running `target/debug/my-web-app`
 Building wasm target
Compiling my-web-app
 Finished dev [unoptimized + debuginfo] target(s)
          ┏━━━━━━━━━━━━━━━━━━━━━━━┓
  Serving ┃ http://127.0.0.1:8080 ┃ <= Click to open your app!
          ┗━━━━━━━━━━━━━━━━━━━━━━━┛

项目目标

wasmdev旨在以最简单的方式开发您的Rust前端Web应用程序。想法是像开发本地/二进制可执行文件一样使用cargo。无需安装像trunk或wasm-pack这样的工具。只需将wasmdev添加到您的依赖项中，并在主函数前添加一个宏，您就拥有了一个适合快速开发的Web服务器！您还可以使用简单的cargo build --release构建所有Web资产，并且它们将被压缩并准备好分发。这有多酷！

免责声明

注意：项目处于早期开发阶段。可能存在错误或其他问题，错误信息可能还有很长的路要走等。请勿用于大型或$$$项目。改用像trunk这样的经过更多测试的工具。

注意：用于运行和测试您的Web前端应用程序的服务器应用程序不适用于在生产环境中托管您的Web应用程序。它缺少许多常见的HTTP服务器功能，并且仅旨在快速且简单地测试和开发您的Web前端应用程序。

注意：由于Web服务器和Web前端是同一应用程序，修改前端代码将在每次运行cargo build时导致cargo重新编译应用程序的server部分。当项目增长时，这可能会成为一个大瓶颈。当项目足够大时，可以使用cargo wasmdev命令而不是wasmdev宏。此命令提供相同的功能，但将删除构建Web服务器的额外编译时间。

功能

Wasmdev 做什么

wasmdev具有与trunk类似的功能。像

在 Rust/wasm 上代码更改时自动重新编译和重新加载
静态文件更改时热重新加载（如 CSS 样式）

它还有一些 trunk 没有的特性（我相信），比如

无需额外工具或流程即可进行优化和最小化的发布构建
- 运行 cargo build --release 并获得您的 dist-optimized 资产
在您的前端应用程序中自动设置 console_error_panic_hook（可禁用）

wasmdev 不做什么

服务器端渲染
将 JavaScript 转换为遵循特定 ECMAScript 版本
将多个 JavaScript 文件捆绑在一起
没有 sass 或 less。可能在未来作为可选功能实现

配置

以下选项可以设置到 wasmdev::main 宏中

addr：Web 服务器的套接字地址
- 默认 "127.0.0.1"
path：静态 Web 资产路径
- 默认： "src"
port：要使用的 TCP 套接字端口
- 默认： 8080
watch：在文件系统更改时重新加载资产
- 默认： true
- 注意：仅影响调试构建，发布构建始终为 false

// src/main.rs
#[wasmdev::main(port: 8080, path: "src")]
fn main() {
    //...
}

用例：`index.html` 覆盖

默认情况下，所有在 src 文件夹中的文件都由 Web 服务器提供服务。您可以将您的 index.html 文件添加到这里以覆盖默认文件。这是引入额外的资产（如 CSS 样式）所必需的。

<!doctype html>
<html>
    <head><link rel="stylesheet" href="/index.css"></head>
    <body></body>
</html>

项目文件树

├── Cargo.toml
└── src
    ├── index.css
    ├── index.html
    └── main.rs

用例：覆盖资产路径

如果您想有独立的静态资产路径，它们可以如前所述在 wasmdev::main 宏中指定。这是推荐的，因为 Web 服务器在您更改静态资产时不会尝试重新编译您的 wasm 代码。

// src/main.rs
#[wasmdev::main(path: "www")]
fn main() {
    //...
}

项目文件树

├── Cargo.toml
├── src
│   └── main.rs
└── www
    └── index.html

用例：不要包含 `console_error_panic_hook`

只需添加 wasmdev 并忽略默认功能

cargo add wasmdev --no-default-features

构建发布版本进行分发

在以发布构建方式构建项目时，Web 资产（所有 JavaScript 文件和 wasm 代码）将构建并优化用于发布。

cargo build --release

Compiling my-web-app
 Finished release [optimized] target(s)
 Finished release artifacts in: 'target/dist/my-web-app'
 Finished release [optimized] target(s)

发布工件将位于 target/dist/{project_name}

└── target
    └── dist
        └── my-web-app
            ├── index.html
            ├── index.js
            └── index.wasm

在发布模式下构建时，构建工件缓存无效化可能不会始终正常工作。这可能会发生，如果

您创建了新的静态资产而没有修改 Rust 源代码或任何现有的静态资产。

更改 src 目录中的任何 Rust 文件或现有的静态资产可以解决这个问题。

代码示例

所有示例都可以通过 cargo 以这种方式构建和执行

cargo run -p <example>
# Run the simple project that outputs "Hello World"
cargo run -p simple

有关示例的完整列表，请参阅 examples 文件夹。

许可

贡献者

Robin Grönberg

待办事项

编写单元测试
实现一种简单的方法来运行所有测试（在浏览器中），只需运行 cargo test 并在 CLI 窗口中查看测试结果。不确定这是否可行。

进一步最小化的想法

结果已经有些许最小化，但我们还可以进一步最小化它（~10-15% 的改进）。因此，转到目标目录

cd target/dist/<example>

此命令将以一种 hacky 的方式将 js/wasm glue 代码函数名替换为最小化版本（需要 wasm-opt）

../../../replace.sh index.js index.wasm

安装 swc 并最后一次最小化 JavaScript（需要 node/npm）

npm install swc
npx swc index.js -C jsc.target=es2017 -C minify=true -C jsc.minify.compress=true -C jsc.minify.mangle=true -o index.js

现在，使用 Python HTTP 服务器（或类似工具）测试您的网站

python3 -m http.server 8080

依赖关系

~0-10MB
~107K SLoC