7个版本

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

1532 在过程宏中

每月48次下载
用于 wasmdev

MIT 许可证

40KB
569 行

wasmdev

为使用Rust编写的Web前端编写的简单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前端应用程序。

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

特性

wasmdev 能做什么

wasmdev 与 trunk 具有类似的功能。

代码更改时自动重新编译和重新加载 rust/wasm
静态文件更改（如 css 样式）时的热重载

它还有一些 trunk 没有的（我相信）功能，如

无需额外工具或流程即可优化和最小化发布构建
- 运行 cargo build --release，你就有你的优化后的 dist 资产
自动在前端应用程序中设置 console_error_panic_hook（可以禁用）

wasmdev 不能做什么

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

配置

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

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

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

用例：覆盖 `index.html`

默认情况下，所有位于 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 宏中指定。这被推荐，因为当您更改静态资产时，网页服务器不会尝试重新编译您的 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

为分发构建发布版本

当以发布构建方式构建您的项目时，网页资产（所有 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>

此命令将以一种巧妙的方式将 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–11MB
~109K SLoC