Rust + WASM с использованием bindgen

Это предварительная тема с использованием bindgenкак второй шаг к моему предыдущему почта

  1. Создать папку проекта utils2
  2. cd в эту папку
  3. из этой папки создайте свою библиотеку:
// 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
  1. сделать цепочку инструментов по умолчанию как 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:

  1. Машина/название семейства/модели ЦП: wasm32,
  2. Поставщик: нет конкретного, поэтому неизвестно,

Название операционной системы: не указано, поэтому неизвестно.

Создавать npm пакетный файл, запустив:

npm init

вышеизложенное создаст package.json.

  1. Установить 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" }
}
  1. Создавать 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
  1. Откройте файлы папки в своей идее и обновите их, как показано в пункте № 11.
$ idea .
  1. Соберите библиотеку 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);
}

libs.rs:

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>

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *