First on the code
https://gitee.com/lightsever/rust_study/tree/master/wasm_hello01
webassembly you will not need to go into details, inside the ear quickly grind to a cocoon.
rustwasm Firefox their own toys, let us continue to do experiments, so rust fly Come on.
Environment Installation
After installing the rust environment still needs a wasm Kit
cargo install wasm-pack
Then if you want to quickly create a project template can use this wasm
cargo generate --git https://github.com/rustwasm/wasm-pack-template
WASM project
Program code to generate the following
# [Wasm_bindgen] is to tell rust, this function is either exported to js use, or want to take it over from js used.
Naturally alert is to take over from js with that
greet is to call js
We do helloworld, it would not be changed here
This project is not compiled with the cargo documents generated wasm
To be used in the project directory
wasm-pack build
Wasm to compile such a success
The project generated a npm package, generate their own glue code, easy to use, but to use webpack package.
I do not npm skilled, I do not engage in this anymore.
The main hidden mystery is unacceptable, we have to carry out his things in a practice.
JS project
I use TS carry out his project, he generated glue code is a npm package, so directly on the site can not be used in the project, we have to be altered.
You may be a little confused by all the WASM? How wrote js code? This is because WASM not completely replace js. He needs to be initialized, you can import some of the lost function to WASM, or else WASM what is not capable . In addition JS need to call a function of WASM, or else WASM Han can not do.
In other words, the main entrance is initialized and work, this work can be a one-time, then the logic of the entire site completed by wasm.
The first is the glue js, this document we have to do three modifications
1. First
import * as wasm from …
Delete this line, which is to tell js import a module from wasm, it will be replaced packager, and we do not want to webpack
2. Then there is the bottom two lines of export
Export and delete the const keyword
Js function is introduced here to wasm glue code, and deriving a function js wasm glue code.
Similarly, it is actually something of package systems
Well, change over
But this wasm come from?
js members web environment all global variables are window, so that we can give him just where to go into
Then glue the definition .d.ts
The export changed to declare, which has become a package definition file can not rely on the use of it.
Write our app.ts
Love with ts, you use this almost js
1. Load wasm file arraybuffer
2. Examples of objects wasm
There is a small trick, we directly plug into the window, or you need glue dictionary js function manually construct a wasm import. Because all members of the global objects are windows, and rustwasm help us generate glue code is globally defined, direct throw window into the finished thing.
3. The global wasm object to the assignment, here is a direct window [ "WASM"] went into this.
4. entry function call wasm
Rust in accordance with our code, should alert a hello peter.
Prudential bully me.
Entry function and initialization functions once finished would not engage.
As long as the future generation wasm is, of course, because we do not use glue file usage rustwasm preset with webpack, so every time we have to change to change. But we are actually very mechanical changes
1.js file, delete the entire line have import of
2.js file, at the beginning of export, export and delete the const keyword
3.d.ts file, at the beginning of export, replaced declare
Back to write a script to automatically do that.
With today helloworld, write a game, it is not far.