mirror of
https://github.com/fluencelabs/wasm-bindgen
synced 2025-05-04 10:02:17 +00:00
80 lines
2.4 KiB
Markdown
80 lines
2.4 KiB
Markdown
|
# No ES Modules
|
||
|
|
|
||
|
|
Explained a bit more in the [internal design](design.html) section one of the
|
||
|
|
key foundational principles of `wasm-bindgen` is ES modules. It supports working
|
||
|
|
without ES modules, however! Not all JS tooling and browsers are ready for ES
|
||
|
|
modules by default, so it can sometimes be helpful to quickly get up and running
|
||
|
|
without them to kick the tires and see how `wasm-bindgen` works.
|
||
|
|
|
||
|
|
Let's start out with our hello-world example from previous chapters, and you can
|
||
|
|
also [follow along in the repository][repo].
|
||
|
|
|
||
|
|
[repo]: https://github.com/rustwasm/wasm-bindgen/tree/master/examples/no_modules
|
||
|
|
|
||
|
|
```rust
|
||
|
|
#[wasm_bindgen]
|
||
|
|
extern {
|
||
|
|
fn alert(msg: &str);
|
||
|
|
}
|
||
|
|
|
||
|
|
#[wasm_bindgen]
|
||
|
|
pub fn greet(name: &str) -> String {
|
||
|
|
alert(&format!("Hello, {}!", name);
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
Like usual, we first compile this to wasm:
|
||
|
|
|
||
|
|
```
|
||
|
|
$ cargo build --target wasm32-unknown-unknown
|
||
|
|
```
|
||
|
|
|
||
|
|
Next, to avoid using ES modules, pass the `--no-modules` option to the
|
||
|
|
`wasm-bindgen` command:
|
||
|
|
|
||
|
|
```
|
||
|
|
$ wasm-bindgen target/wasm32-unknown-unknown/debug/hello.wasm --no-modules --out-dir .
|
||
|
|
```
|
||
|
|
|
||
|
|
Next up we need to write some HTML to interact with the wasm:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<html>
|
||
|
|
<body>
|
||
|
|
<script src='./hello.js'></script>
|
||
|
|
<script>
|
||
|
|
wasm_bindgen('./hello_bg.wasm')
|
||
|
|
.then(() => wasm_bindgen.greet('World'));
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
and that's it! If you open up that web page in a browser (needs to be over HTTP)
|
||
|
|
then you should see an alert for "Hello, World!".
|
||
|
|
|
||
|
|
The `--no-modules` output will not instantiate or compile the wasm module when
|
||
|
|
included on a web page, instead it just parses and configures the JS bindings
|
||
|
|
for the wasm-module-to-be. The page is configured with one exported global, in
|
||
|
|
this case `wasm_bindgen`. The name of this global can be configured with the
|
||
|
|
`--no-modules-global` option.
|
||
|
|
|
||
|
|
The global `wasm_bindgen` is a function that takes one argument, the path to the
|
||
|
|
wasm file. When invoked `wasm_bindgen` will return a promise for when the wasm
|
||
|
|
file is ready-to-go. After that all exported functionality on
|
||
|
|
`wasm_bindgen` will be functional.
|
||
|
|
|
||
|
|
In the example above, after calling `wasm_bindgen('./hello_bg.wasm')` we wait
|
||
|
|
for the wasm module to be compiled, and afterwards we're invoking our `greet`
|
||
|
|
export.
|
||
|
|
|
||
|
|
Note that exports are available for binding before the wasm module has been
|
||
|
|
instantiated, for example this would have also worked:
|
||
|
|
|
||
|
|
```js
|
||
|
|
const { greet } = wasm_bindgen;
|
||
|
|
|
||
|
|
wasm_bindgen('./hello_bg.wasm')
|
||
|
|
.then(() => greet('World'));
|
||
|
|
```
|