Lib.rs

› Web编程 › HTTP服务器 › wasmdev
#web-server #wasmdev #web-frontend #front-end #index #wasm #path

wasmdev_server

wasmdev 服务器实现

所有者 Gronis.

7个版本

0.1.7 2023年7月7日
0.1.6 2023年3月7日
0.1.3 2023年2月26日

在HTTP服务器中排名 360


用于wasmdev

MIT 许可证

43KB
788 行

wasmdev

crates.io docs.rs

用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资产
  • 在您的前端应用中自动设置 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

默认情况下，Web服务器会提供 src 文件夹中的所有文件。您可以在此处添加您的 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 文件夹以获取示例的完整列表。

许可证

  • MIT

贡献者

  • Robin Grönberg

待办事项

  • 编写单元测试
  • 通过简单地运行 cargo test 来实现运行所有测试（在浏览器中）的简单方法（测试结果在 cli 窗口中）。不确定这是否可行。

进一步压缩的想法

结果已经有所压缩，但我们还可以进一步压缩（~10-15% 的改进）。因此，请前往目标目录

cd target/dist/<example>

此命令将用压缩版本（以黑客的方式）替换 js/wasm 粘合代码函数名称（需要 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
~108K SLoC