002 Instale a cadeia de ferramentas Rust e WebAssembly e helloworld

0 introdução

Endereço do vídeo: https://www.bilibili.com/video/BV1eg411g7c8
Código-fonte relacionado: https://github.com/anonymousGiga/Rust-and-Web-Assembly

1 instalação de ambiente

1. Para instalar a cadeia de ferramentas Rust, consulte https://www.rust-lang.org/tools/install

Para usar bem o Rust e o WebAssembly, precisamos de uma versão estável do Rust 1.3 ou superior.

2. Instale o wasm-pack

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

3. Instale o gerador de carga

cargo install cargo-generate

4. Instale o npm

npm install npm@latest -g

2 escreva olá mundo novamente

2.1 reescrever olá mundo

Já escrevemos um exemplo simples de uso do webassembly antes e hoje continuaremos a escrever um exemplo de helloworld. Se o exemplo anterior é uma bicicleta, então o exemplo de hoje é um carro, que é um pouco mais avançado, então vamos começar oficialmente.

1. Baixe o modelo

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

2. Compilar

wasm-pack build

3. Coloque wasm na página da web

npm init wasm-app www

cd www
npm install

Abra package.json e adicione o seguinte código:

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

Modifique index.js da seguinte maneira:

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

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

Instalar:

npm install

4. Inicie o teste

npm run start

Abra o navegador e digite http://localhost:8080

2.2 Explicação do Projeto

Na seção anterior, reescrevemos nosso helloworld. Nesta seção, explicaremos os arquivos correspondentes no projeto.

2.2.1 Peças relacionadas à ferrugem

Esta parte do conteúdo, amigos que aprenderam Rust antes, acharão muito familiar.

• wasm-jogo-da-vida/Cargo.toml

Este arquivo contém principalmente configurações relacionadas ao Cargo, dependências de compilação, etc.

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

O código específico pode ser semelhante ao código em nosso exemplo na seção anterior.

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

Fornece ferramentas comuns para facilitar a compilação do Rust para o WebAssembly.

2.2.2 Pacote compilado

Após a compilação, o diretório Pkg é gerado e exibido usando o seguinte comando:

tree -l

A saída é a seguinte:

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

O arquivo .wasm é um arquivo de bytes do WebAssembly gerado pelo compilador Rust, que contém a função greet.

• wasm_game_of_life.js

js são gerados por wasm bindgen para importar funções DOM e JavaScript para Rust e expor uma API para funções WebAssembly de JavaScript.

• *.d.ts

*.d.ts contém declarações relacionadas a JavaScript.

• pacote.json

O arquivo package.json contém metadados sobre os pacotes configuráveis ​​JavaScript e WebAssembly gerados. Ele é usado por empacotadores npm e JavaScript para determinar dependências entre pacotes, nomes de pacotes, versões e outras coisas. Ele nos ajuda a integrar com ferramentas JavaScript e nos permite publicar pacotes no npm.