Rust + WASM с использованием bindgen
Это предварительная тема с использованием bindgen
как второй шаг к моему предыдущему почта
- Создать папку проекта
utils2
- cd в эту папку
- из этой папки создайте свою библиотеку:
// install rust if not yet done
// curl -sSf | sh
mkdir utils2
cd utils 2
cargo init // Or it can be created in one line as:
cargo new utils2 cd utils2
- сделать цепочку инструментов по умолчанию как
nightly
в качествеwasm
теперь поддерживается только в nightly:
rustup override set nightly
// Add was32 target if not yet installed
rustup target add wasm32-unknown-unknown
Примечание. Платформы определяются их Target Triplet
то есть: machine-vendor-operatingsystem
:
- Машина/название семейства/модели ЦП: wasm32,
- Поставщик: нет конкретного, поэтому неизвестно,
Название операционной системы: не указано, поэтому неизвестно.
Создавать npm
пакетный файл, запустив:
npm init
вышеизложенное создаст package.json
.
- Установить
webpack
требования npm,node_modules
будет создана папка:
// brew install node
npm install -D webpack webpack-cli webpack-dev-server
вышеизложенное изменит package.json
и сделать это примерно так:
{ "name": "utils2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.27.1", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.10" }
}
- Создавать
domUtils.js
,index.html
,index.js
а такжеwebpack.config.js
файлы, чтобы структура была следующей:
// if you need to install tree, it can be done by
// brew install tree
$ tree .
.
├── Cargo.lock
├── Cargo.toml
├── domUtils.js
├── index.html
├── index.js
├── package.json
├── src
│ └── lib.rs
└── webpack.config.js
- Откройте файлы папки в своей идее и обновите их, как показано в пункте № 11.
$ idea .
- Соберите библиотеку rust wasm, используя
wasm-pack
в качестве:
// cargo install wasm-pack
wasm-pack build
// this will create the standard target folder, and additional folder called pkg
// the pkg folder tree is:
├── pkg
│ ├── utils2.d.ts
│ ├── utils2.js
│ ├── utils2_bg.d.ts
│ └── utils2_bg.wasm
npx webpack-dev-server
Груз.томл:
[package]
name = "utils2"
version = "0.1.0"
authors = ["Hasan Yousef"]
edition = "2018"
[dependencies]
wasm-bindgen = "0.2.29"
[lib]
crate-type = ["cdylib"]
domUtils.js:
export const appendStringToBody = (value) => { const text = document.createTextNode(value); document.body.appendChild(text);
}
use wasm_bindgen::prelude::*; extern { fn appendStringToBody(s: &str);
} pub fn run(my_text :&str) { unsafe { appendStringToBody(my_text); }
}
веб-пакет.config.js:
const path = require("path"); module.exports = { entry: "./index.js", output: { path: path.resolve(__dirname, "dist"), filename: "index.js", }, mode: "development"
};
index.js:
import("./pkg/my_app").then(wasmModule => { wasmModule.run("hi there");
});
индекс.html:
<html>
<head> <script src="./index.js"></script> <head>
<body></body>
<html>