Add workaround for hello_world running in Chrome

Fixes #50.
This commit is contained in:
Sophie Alpert 2018-03-03 10:46:43 -08:00
parent 98b9bee876
commit 67411f519c
5 changed files with 28 additions and 2 deletions

View File

@ -221,13 +221,15 @@ $ npm run serve
```
If you open https://localhost:8080 in a browser you should see a `Hello, world!`
dialog pop up!
dialog pop up! This works in Firefox out of the box but not in Chrome due to a
webpack issue. See [the hello_world README][hello-readme] for a workaround.
If that was all a bit much, no worries! You can [follow along
online][hello-tree] to see all the files necessary as well as a script to set it
all up.
[hello-tree]: https://github.com/alexcrichton/wasm-bindgen/tree/master/examples/hello_world
[hello-readme]: https://github.com/alexcrichton/wasm-bindgen/tree/master/examples/hello_world/README.md
## What just happened?

View File

@ -1,3 +1,4 @@
package-lock.json
hello_world.js
hello_world_wasm.js
hello_world_wasm.wasm

View File

@ -12,3 +12,7 @@ $ ./build.sh
(or running the two commands on Windows manually)
and then opening up `index.html` in a web browser should show a dialog!
In Chrome, you'll need to delete hello_world_wasm.wasm after building (or
change hello_world.js to import hello_world_wasm.js instead) and uncomment the
relevant line in index.js to work around a webpack bug.

View File

@ -15,6 +15,16 @@ cargo +nightly run --manifest-path ../../crates/wasm-bindgen-cli/Cargo.toml \
../../target/wasm32-unknown-unknown/release/hello_world.wasm --out-dir .
# wasm-bindgen ../../target/wasm32-unknown-unknown/hello_world.wasm --out-dir .
# To avoid a bug occurring when webpack, wasm, and Chrome are used together, we
# convert the .wasm module to a .js module that embeds the wasm bytecode. To
# enable this, delete hello_world_wasm.wasm after building or change
# hello_world.js to import from hello_world_wasm.js explicitly and uncomment
# the relevant line in index.js.
cargo +nightly run --manifest-path ../../crates/wasm-bindgen-cli/Cargo.toml \
--bin wasm2es6js -- \
--base64 -o hello_world_wasm.js hello_world_wasm.wasm
# wasm2es6js --base64 -o hello_world_wasm.js hello_world_wasm.wasm
# Finally, package everything up using Webpack and start a server so we can
# browse the result
npm install

View File

@ -3,6 +3,15 @@
// will work here one day as well!
const js = import("./hello_world");
js.then(js => {
Promise.all([
js,
// Due to https://github.com/webpack/webpack/issues/6475, Webpack does not
// support sync wasm imports larger than 4kB in Chrome. We use wasm2es6js to
// hack around this and need to defer our call until the converted wasm
// module is asynchronously loaded. Uncomment this line to enable.
// This hack is not necessary in Firefox.
// import("./hello_world_wasm.js").then(wasm => wasm.booted),
]).then(([js]) => {
js.greet("World!");
});