鹤壁哪里做网站,广元网站建设,成都网站开发,网站建设优化方法一、开发环境搭建
1. 基础工具安装
# 安装 Rust
curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh# 安装 wasm-pack
cargo install wasm-pack# 安装开发服务器
cargo install basic-http-server# 安装文件监听工具
cargo install cargo-watch2. VSCode 插件安装…一、开发环境搭建
1. 基础工具安装
# 安装 Rust
curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh# 安装 wasm-pack
cargo install wasm-pack# 安装开发服务器
cargo install basic-http-server# 安装文件监听工具
cargo install cargo-watch2. VSCode 插件安装
rust-analyzer: Rust 语言支持CodeLLDB: 调试支持WebAssembly: WASM 代码高亮
二、项目设置
1. 项目初始化
cd /Users/xubai/workspace/xubai/rust-demo
cargo new --lib wasm-demo
cd wasm-demo2. 配置 Cargo.toml
[package]
name wasm-demo
version 0.1.0
edition 2021[lib]
crate-type [cdylib][dependencies]
wasm-bindgen 0.2
js-sys 0.3
web-sys { version 0.3, features [console] }
console_error_panic_hook 0.13. 配置开发环境
创建 .gitignore 文件
/target
/pkg
Cargo.lock三、开发工作流配置
1. 自动构建设置
打开一个终端运行以下命令来启动自动构建
cargo watch -i .gitignore -i pkg/* -s wasm-pack build --target web --dev2. 开发服务器
在另一个终端窗口运行
basic-http-server .现在当你修改任何源代码文件时项目会自动重新构建并且可以通过 http://localhost:4000 访问。
四、基础示例实现
1. 简单计数器
use wasm_bindgen::prelude::*;
use web_sys::console;#[wasm_bindgen]
pub struct Counter {count: i32,
}#[wasm_bindgen]
impl Counter {pub fn new() - Counter {Counter { count: 0 }}pub fn increment(mut self) - i32 {self.count 1;self.count}
}2. 前端集成
创建 www/index.html:
!DOCTYPE html
html
headmeta charsetutf-8titleWASM Demo/title
/head
bodyh1WASM 计数器示例/h1button idincrement增加/buttonp当前计数span idcount0/span/pscript typemodule src./index.js/script
/body
/html创建 www/index.js:
import init, { Counter } from ../pkg/wasm_demo.js;async function main() {await init();const counter Counter.new();const button document.getElementById(increment);const countDisplay document.getElementById(count);button.onclick () {const count counter.increment();countDisplay.textContent count;};
}main().catch(console.error);五、调试技巧
1. Rust 代码调试
// 在 Rust 代码中打印日志
console::log_1(JsValue::from_str(调试信息));// 使用 console_error_panic_hook
#[wasm_bindgen(start)]
pub fn main() - Result(), JsValue {console_error_panic_hook::set_once();Ok(())
}2. Chrome DevTools 调试
打开 DevToolsCommand Option I在 Sources 面板中找到生成的 .wasm 文件使用 Console 面板查看日志输出在 JavaScript 代码中设置断点
3. 实时开发体验
修改 Rust 代码会自动触发重新构建刷新浏览器即可看到最新变化控制台会显示构建状态和错误信息
六、常见问题解决
1. 构建失败
检查 Cargo.toml 依赖是否正确确保 wasm-pack 版本最新查看 Rust 编译错误信息
2. 加载失败
// 添加错误处理
init().catch(err {console.error(WASM 加载失败:, err);// 显示用户友好的错误信息document.body.innerHTML div stylecolor: red;加载失败请刷新页面重试/div;
});3. 开发服务器问题
确保端口 4000 未被占用检查文件权限验证构建输出目录 (pkg) 是否存在
七、开发建议 工作流程 保持两个终端窗口一个运行 watch一个运行服务器使用 VSCode 的集成终端可以方便地管理多个窗口定期清理 pkg 目录避免缓存问题 调试效率 善用 console.log保持 DevTools 网络面板打开以监控资源加载使用 Chrome 的 Performance 面板分析性能问题 最佳实践 模块化组织代码添加适当的错误处理保持构建脚本的清晰和可维护性
