0 введение

Адрес видео: https://www.bilibili.com/video/BV1eg411g7c8
Связанный исходный код: https://github.com/anonymousGiga/Rust-and-Web-Assembly

1 установка среды

1. Чтобы установить набор инструментов Rust, перейдите по ссылке https://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 install cargo-generate

4. Установите нпм

npm install npm@latest -g

2 написать привет мир еще раз

2.1 переписать привет мир

Мы уже писали простой пример использования 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

Откройте браузер и введите http://localhost:8080.

2.2 Описание проекта

В предыдущем разделе мы переписали наш helloworld, а в этом разделе мы расскажем о соответствующих файлах в проекте.

2.2.1 Детали, подверженные ржавчине

Эта часть содержания покажется очень знакомой друзьям, изучавшим 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 — это байтовый файл WebAssembly, сгенерированный компилятором Rust, который содержит функцию приветствия.

wasm_game_of_life.js

js генерируются wasm bindgen для импорта функций DOM и JavaScript в Rust и предоставления API для функций JavaScript WebAssembly.

*.d.ts

*.d.ts содержит объявления, относящиеся к JavaScript.

пакет.json

Файл package.json содержит метаданные о сгенерированных пакетах JavaScript и WebAssembly. Он используется сборщиками npm и JavaScript для определения зависимостей между пакетами, именами пакетов, версиями и другими вещами. Это помогает нам интегрироваться с инструментами JavaScript и позволяет нам публиковать пакеты в npm.

002 Установите набор инструментов Rust и WebAssembly и helloworld