002 安装Rust和WebAssembly工具链和helloworld

0 介绍

视频地址:www.bilibili.com/video/BV1eg411g7c...
相关源码:github.com/anonymousGiga/Rust-and-...

1 环境安装

1、安装Rust工具链,可以参考www.rust-lang.org/tools/install

为了很好的使用Rust和WebAssembly,我们需要Rust 1.3以上的稳定版。

2、安装wasm-pack

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

3、安装cargo-generate

cargo install cargo-generate

4、安装npm

npm install npm@latest -g

2 再写hello world

2.1重新写hello world

之前我们有写过一个简单的使用webassembly的例子,今天我们继续写一个helloworld的例子。如果说之前的例子是自行车的话,那么今天的例子就是一辆小汽车,要高级一点,下面我们就正式开始。

1、下载模板

cargo generate --git https://github.com/rustwasm/wasm-pack-template

2、编译

wasm-pack build

3、将wasm放入网页

npm init wasm-app www
cd www
npm install

打开package.json,添加如下代码:

{
  // ...
  "dependencies": {                     // Add this three lines block!
    "wasm-game-of-life": "file:../pkg"
  },
  "devDependencies": {
    //...
  }
}

修改index.js如下:

//import * as wasm from "hello-wasm-pack";

import * as wasm from "wasm-game-of-life";
wasm.greet();

安装:

npm install

4、启动测试

npm run start

打开浏览器输入localhost:8080

2.2 项目解释

上一节我们重新写了我们的helloworld,这一节我们就来解释一下项目中对应的文件。

2.2.1 Rust相关部分

此部分内容,之前学过Rust的小伙伴,会发现很熟悉。

  • wasm-game-of-life/Cargo.toml

该文件中主要是Cargo相关的配置,编译的依赖等。

  • wasm-game-of-life/src/lib.rs

具体的代码,可以发现和我们前一节的例子中的代码差不多。

  • wasm-game-of-life/src/utils.rs

提供公用的工具,便于我们更方便的编译Rust到WebAssembly。

2.2.2 编译后的包

编译后生成Pkg目录,使用如下命令显示:

tree -l

输出如下:

pkg/
├── package.json
├── README.md
├── wasm_game_of_life_bg.js
├── wasm_game_of_life_bg.wasm
├── wasm_game_of_life_bg.wasm.d.ts
├── wasm_game_of_life.d.ts
└── wasm_game_of_life.js
  • wasm_game_of_life_bg.wasm

.wasm文件是由Rust编译器生成的WebAssembly字节文件,里面就包含greet函数。

  • wasm_game_of_life.js

js文件是由wasm bindgen生成的,用于将DOM和JavaScript函数导入Rust,并将一个API暴露给JavaScript的WebAssembly函数。

  • *.d.ts

*.d.ts包含对JavaScript的相关的声明。

  • package.json

package.json文件包含有关生成的JavaScript和WebAssembly包的元数据。npm和JavaScript捆绑包使用它来确定包、包名、版本和其它内容之间的依赖关系。它帮助我们与JavaScript工具集成,并允许我们将包发布到npm。

本作品采用《CC 协议》,转载必须注明作者和本文链接
令狐一冲
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!