8 个版本

0.1.7	2023年7月7日
0.1.6	2023年3月7日
0.1.3	2023年2月26日
0.1.0	2022年12月30日

#2 在 #web-frontend

MIT 许可证

23KB
255 行

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 服务器应用程序不适用于在生产环境中托管您的 Web 应用程序。它缺少许多常见的 HTTP 服务器功能，仅旨在快速简单地测试和开发您的 Web 前端应用程序。

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

特性

wasmdev 能做什么

wasmdev 与 trunk 具有类似的功能。例如

在 Rust/wasm 代码更改时自动重新编译和重新加载
静态文件更改（如 css-styles）时的热重载

它还有一些 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 文件夹以获取示例的完整列表。

许可证

贡献者

Robin Grönberg

待办事项

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

进一步压缩的想法

结果已经有所压缩，但我们还可以进一步压缩（约提高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