1 个不稳定版本
| 0.1.0 | 2020 年 5 月 23 日 |
|---|
#5 在 #bulma
9KB
78 行
关于 Yew
此模板演示了使用 Yew、wasm-bindgen 和 wasm-pack 创建前端网页应用的最低代码和工具，包含一个 HTML 文件、一个 JavaScript 文件和一个 WebAssembly 文件。
注意：yew-wasm-pack-template 是此模板的全功能版本，集成了许多常见的网络技术。
使用方法
1) 安装 Rust 和 wasm-pack
按照 https://www.rust-lang.net.cn/tools/install 的说明安装 Rust，并按照 wasm-pack 中的 安装 链接进行操作。
2) 构建
在项目的根目录中，输入 wasm-pack build --target web。
3) [临时] 打包
在项目的根目录中，输入 rollup ./main.js --format iife --file ./pkg/bundle.js。
注意：由于 wasm-pack 还未实现 RFC #6，目前没有可用的选项来 生成单个混合 JavaScript 文件。在此期间，需要使用打包器，如 Rollup。
4) [可选] 测试运行
在项目的根目录中运行一个 web 服务器，例如使用 Python 3 命令：python -m http.server 8080，然后在浏览器中加载 https://127.0.0.1:8080/ 来运行应用。
注意：浏览器控制台显示类似于 "WebAssembly.instantiateStreaming 失败。这可能是由于您的服务器没有使用 application/wasm MIME 类型来提供 wasm 文件。" 的错误是预期行为。您的生产 web 服务器应该配置为将 WebAssembly 文件与 application/wasm MIME 类型关联。
5) 部署
从您项目的根目录访问生成的构建工件，bundle.js 和 yew_wasm_pack_minimal_bg.wasm，位于 ./pkg。
关于 wasm-pack
本模板旨在将 Rust 库编译成 WebAssembly 并将生成的包发布到 NPM。
请务必查看其他 wasm-pack 教程以获取其他模板和 wasm-pack 的用法。
🚴 使用方法
🐑 使用 cargo generate 来克隆此模板
cargo generate --git https://github.com/rustwasm/wasm-pack-template.git --name my-project
cd my-project
🛠️ 使用 wasm-pack build 构建
wasm-pack build
🔬 使用 wasm-pack test 在无头浏览器中测试
wasm-pack test --headless --firefox
🎁 使用 wasm-pack publish 发布到 NPM
wasm-pack publish
🔋 内置电池
wasm-bindgen用于在 WebAssembly 和 JavaScript 之间进行通信。console_error_panic_hook用于将 panic 消息记录到开发者控制台。wee_alloc，一个针对小型代码大小优化的分配器。
依赖项
~3.5–5MB
~87K SLoC