การตั้งค่า Rust สำหรับ WebAssembly

Welcome! Rust is a fantastic language for building high-performance WebAssembly (WASM) modules.

Its focus on speed, memory safety, and control makes it ideal for web applications needing native-like performance.

In this lesson, we'll configure your environment and create your first Rust-WASM project.

Before we dive into WASM, ensure you have the Rust toolchain installed. This includes Rustc (the compiler) and Cargo (the package manager).

• You can check by typing rustc --version and cargo --version in your terminal.
• If not installed, visit rustup.rs to get rustup, the official Rust installer.

Let's confirm your Rust setup is working. Create a file named main.rs and add this code. Then run it using cargo run.

WebAssembly isn't a default target for Rust. You need to explicitly add it to your toolchain.

The wasm32-unknown-unknown target is a generic WASM target that doesn't assume any specific host environment (like a browser or Node.js).

Run this command in your terminal:

Building Rust code for WebAssembly can involve several steps. That's where wasm-pack comes in!

wasm-pack is a powerful command-line tool that streamlines the entire workflow: compiling your Rust code, generating JavaScript bindings, and packaging it for web usage.

Since wasm-pack is a Rust application, you can install it using Cargo, Rust's package manager.

Run this command in your terminal:

This might take a moment as it compiles the tool.

Now let's create a new Rust project specifically for WebAssembly. wasm-pack can scaffold this for you.

Navigate to your desired projects directory and run:

This command creates a new directory, my-first-wasm-app, with a basic Rust library structure ready for WASM.

Inside your new my-first-wasm-app directory, you'll find:

• Cargo.toml: Rust's manifest file, defining project dependencies and metadata.
• src/lib.rs: This is where your Rust code for the WASM module will live. Unlike traditional Rust applications, WASM modules are usually libraries.
• .gitignore: Standard Git ignore file.

Open src/lib.rs. You'll see some boilerplate. Let's add a simple function that can be called from JavaScript:

The #[wasm_bindgen] attribute tells wasm-bindgen (which wasm-pack uses) to generate JavaScript glue code for this function.

With your Rust WASM code ready, it's time to compile it into a WebAssembly module and its JavaScript bindings.

Navigate into your project directory (my-first-wasm-app) and run:

This command compiles your Rust code, generates the necessary .wasm and .js files, and places them in a new pkg directory.

Great job! You've successfully set up your Rust environment for WebAssembly development.

We covered:

• Verifying your Rust toolchain.
• Adding the wasm32-unknown-unknown target.
• Installing and using wasm-pack to initialize and build your first WASM project.
• Understanding the basic project structure and a simple #[wasm_bindgen] function.

Next, you'll learn how to load and run your compiled WASM module in a web browser using JavaScript!