Rust与WebAssembly项目教程

Rust与WebAssembly项目教程

create-wasm-appnpm init template for consuming rustwasm pkgs项目地址:https://gitcode.com/gh_mirrors/cr/create-wasm-app

项目的目录结构及介绍

create-wasm-app/
├── package.json
├── README.md
├── src
│   ├── index.html
│   ├── index.js
│   └── utils.js
├── wasm-game-of-life
│   ├── Cargo.toml
│   ├── src
│   │   ├── lib.rs
│   │   └── utils.rs
│   └── target
│       └── wasm32-unknown-unknown
│           └── release
│               └── wasm_game_of_life.wasm
└── webpack.config.js

• package.json: 定义了项目的依赖和脚本。
• README.md: 项目的说明文档。
• src/: 包含前端代码的目录。
  • index.html: 主页面。
  • index.js: 入口JavaScript文件。
  • utils.js: 辅助函数。
• wasm-game-of-life/: Rust项目的目录。
  • Cargo.toml: Rust项目的配置文件。
  • src/: Rust源代码目录。
    • lib.rs: Rust库的入口文件。
    • utils.rs: Rust辅助函数。
  • target/: 编译生成的目标文件目录。
    • wasm32-unknown-unknown/: WebAssembly目标目录。
      • release/: 发布版本的目标文件。
        • wasm_game_of_life.wasm: 编译生成的WebAssembly文件。
• webpack.config.js: Webpack配置文件。

项目的启动文件介绍

• src/index.js: 这是项目的入口JavaScript文件。它负责加载和初始化WebAssembly模块，并将其功能暴露给前端。

import * as wasm from "wasm-game-of-life";

wasm.greet();

• wasm-game-of-life/src/lib.rs: 这是Rust项目的入口文件。它定义了WebAssembly模块的接口。

mod utils;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet() {
    alert("Hello, wasm-game-of-life!");
}

项目的配置文件介绍

• package.json: 定义了项目的依赖和脚本。

{
  "name": "create-wasm-app",
  "version": "0.1.0",
  "description": "create an app to consume rust-generated wasm bundles",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "wasm-game-of-life": "file:../pkg"
  },
  "devDependencies": {
    "webpack": "^4.29.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5",
    "copy-webpack-plugin": "^5.0.0"
  }
}

• wasm-game-of-life/Cargo.toml: Rust项目的配置文件。

[package]
name = "wasm-game-of-life"
version = "0.1.0"
authors = ["Your Name <you@example.com>"]
edition = "2018"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

• webpack.config.js: Webpack配置文件。

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
  },
  mode: 'development',
  plugins: [
    new CopyWebpackPlugin(['src/index.html'])
  ],

create-wasm-appnpm init template for consuming rustwasm pkgs项目地址:https://gitcode.com/gh_mirrors/cr/create-wasm-app