mirror of
https://github.com/rustwasm/wasm-bindgen.git
synced 2024-11-24 06:33:33 +03:00
No more need for chrome workarounds!
This commit is contained in:
parent
94b59e0d6c
commit
d04f8c7119
@ -212,8 +212,7 @@ $ npm run serve
|
||||
```
|
||||
|
||||
If you open https://localhost:8080 in a browser you should see a `Hello, world!`
|
||||
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.
|
||||
dialog pop up!
|
||||
|
||||
If that was all a bit much, no worries! You can [execute this code
|
||||
online][hello-online] thanks to [WebAssembly Studio](https://webassembly.studio)
|
||||
|
@ -3,7 +3,7 @@
|
||||
"serve": "webpack-dev-server"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack": "^4.0.1",
|
||||
"webpack": "^4.8.0",
|
||||
"webpack-cli": "^2.0.10",
|
||||
"webpack-dev-server": "^3.1.0"
|
||||
}
|
||||
|
@ -3,7 +3,7 @@
|
||||
"serve": "webpack-dev-server"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack": "^4.0.1",
|
||||
"webpack": "^4.8.0",
|
||||
"webpack-cli": "^2.0.10",
|
||||
"webpack-dev-server": "^3.1.0"
|
||||
}
|
||||
|
@ -3,7 +3,7 @@
|
||||
"serve": "webpack-dev-server"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack": "^4.0.1",
|
||||
"webpack": "^4.8.0",
|
||||
"webpack-cli": "^2.0.10",
|
||||
"webpack-dev-server": "^3.1.0"
|
||||
}
|
||||
|
@ -3,7 +3,7 @@
|
||||
"serve": "webpack-dev-server"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack": "^4.0.1",
|
||||
"webpack": "^4.8.0",
|
||||
"webpack-cli": "^2.0.10",
|
||||
"webpack-dev-server": "^3.1.0"
|
||||
}
|
||||
|
@ -3,7 +3,7 @@
|
||||
"serve": "webpack-dev-server"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack": "^4.0.1",
|
||||
"webpack": "^4.8.0",
|
||||
"webpack-cli": "^2.0.10",
|
||||
"webpack-dev-server": "^3.1.0"
|
||||
}
|
||||
|
@ -14,35 +14,3 @@ $ ./build.sh
|
||||
(or running the two commands on Windows manually)
|
||||
|
||||
and then opening up `index.html` in a web browser should show a dialog!
|
||||
|
||||
## Caveat for Chrome users
|
||||
|
||||
Note that unfortunately this example does not yet work in Chrome. Chrome has
|
||||
different limits than than Firefox, for example, about instantiating wasm
|
||||
modules. Currently the Webpack wasm integration uses `new WebAssembly.Instance`
|
||||
which limits the input module to at most 4K, but frequently (especially in
|
||||
development mode) wasm modules may be larger than 4K.
|
||||
|
||||
The usage of `new WebAssembly.Instance` is currently believed to [be a bug][bug]
|
||||
in webpack which is likely to get fixed once [`instantiateStreaming`][bug2] is
|
||||
used instead. Once this is [fixed in upstream Webpack][fix] then this example
|
||||
will work in Chrome (like it does currently in Firefox).
|
||||
|
||||
In the meantime, however, there's a `chrome` directory in this folder which also
|
||||
has a `build.sh` script that contains a workaround for this issue. If you're
|
||||
using chrome it's recommended to `cd` into that folder and run that script.
|
||||
|
||||
The workaround here is a `wasm2es6js` tool, which is currently a bit of a hack.
|
||||
The wasm-bindgen project assumes that wasm files are ES6 modules (as does
|
||||
Webpack's current integration), so the `wasm2es6js` translates a wasm file to a
|
||||
JS file by explicitly instantiating the wasm module rather than relying on the
|
||||
bundler to do it. When doing this we can manually use
|
||||
`WebAssembly.instantiate` which does not have similar limits in Chrome.
|
||||
|
||||
If all this seems unfortunate for now, don't worry because it should hopefully
|
||||
be fixed soon! If you've got any questions about this though feel free to ask on
|
||||
the issue tracker or in the `#rust-wasm` IRC channel.
|
||||
|
||||
[bug]: https://github.com/webpack/webpack/issues/6475
|
||||
[bug2]: https://github.com/webpack/webpack/issues/6433
|
||||
[fix]: https://github.com/webpack/webpack/pull/6709
|
||||
|
@ -1,22 +0,0 @@
|
||||
#!/bin/sh
|
||||
|
||||
set -ex
|
||||
|
||||
# This is the same as the directory above this.
|
||||
cargo +nightly build --target wasm32-unknown-unknown
|
||||
cargo +nightly run -p wasm-bindgen-cli --bin wasm-bindgen -- \
|
||||
../../../target/wasm32-unknown-unknown/debug/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_bg.wasm after building or change
|
||||
# hello_world.js to import from hello_world_bg.js explicitly and uncomment
|
||||
# the relevant line in index.js.
|
||||
cargo +nightly run -p wasm-bindgen-cli --bin wasm2es6js -- \
|
||||
--base64 -o hello_world_bg.js hello_world_bg.wasm
|
||||
# wasm2es6js --base64 -o hello_world_bg.js hello_world_bg.wasm
|
||||
rm hello_world_bg.wasm
|
||||
|
||||
# And like the directory above this, from here it's the same.
|
||||
npm install
|
||||
npm run serve
|
@ -1,23 +0,0 @@
|
||||
#!/bin/sh
|
||||
|
||||
set -ex
|
||||
|
||||
# This is the same build.sh, later we are going to use the
|
||||
# fetch flag to avoid including the wasm module as a string
|
||||
# of base64, instead using the js `fetch` function
|
||||
#to request the module from the server.
|
||||
cargo +nightly build --target wasm32-unknown-unknown
|
||||
cargo +nightly run -p wasm-bindgen-cli --bin wasm-bindgen -- \
|
||||
../../../target/wasm32-unknown-unknown/debug/hello_world.wasm --out-dir .
|
||||
|
||||
# To avoid a bug occurring when webpack, wasm, and Chrome are used together, we
|
||||
# create a .js module that will download the .wasm module via fetch.
|
||||
cargo +nightly run -p wasm-bindgen-cli --bin wasm2es6js -- \
|
||||
--fetch ./hello_world_bg.wasm -o hello_world_bg.js hello_world_bg.wasm
|
||||
|
||||
# Install the npm items as usual.
|
||||
npm install
|
||||
|
||||
# since we kept the same name for the .js module, we need
|
||||
# to force webpack to ignore any other file extensions
|
||||
npm run serve -- --resolve-extensions .js
|
@ -1 +0,0 @@
|
||||
../index.html
|
@ -1,11 +0,0 @@
|
||||
// Note that unlike the directory above this we don't need to use an
|
||||
// asynchronous `import` statement as we're just working with JS here so we can
|
||||
// use normal `import { ... }` statements.
|
||||
//
|
||||
// Unlike before however we have to *also* import the JS file itself containing
|
||||
// wasm (generated by wasm2es6js) which has a `booted` promise to let us know
|
||||
// when it's ready to go.
|
||||
import { greet } from './hello_world';
|
||||
import { booted } from './hello_world_bg';
|
||||
|
||||
booted.then(() => greet("World!"));
|
@ -1 +0,0 @@
|
||||
../package.json
|
@ -1 +0,0 @@
|
||||
../webpack.config.js
|
@ -3,7 +3,7 @@
|
||||
"serve": "webpack-dev-server"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack": "^4.0.1",
|
||||
"webpack": "^4.8.0",
|
||||
"webpack-cli": "^2.0.10",
|
||||
"webpack-dev-server": "^3.1.0"
|
||||
}
|
||||
|
@ -3,7 +3,7 @@
|
||||
"serve": "webpack-dev-server"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack": "^4.0.1",
|
||||
"webpack": "^4.8.0",
|
||||
"webpack-cli": "^2.0.10",
|
||||
"webpack-dev-server": "^3.1.0"
|
||||
}
|
||||
|
@ -3,7 +3,7 @@
|
||||
"serve": "webpack-dev-server"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack": "^4.0.1",
|
||||
"webpack": "^4.8.0",
|
||||
"webpack-cli": "^2.0.10",
|
||||
"webpack-dev-server": "^3.1.0"
|
||||
}
|
||||
|
@ -3,7 +3,7 @@
|
||||
"serve": "webpack-dev-server"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack": "^4.0.1",
|
||||
"webpack": "^4.8.0",
|
||||
"webpack-cli": "^2.0.10",
|
||||
"webpack-dev-server": "^3.1.0"
|
||||
}
|
||||
|
@ -3,7 +3,7 @@
|
||||
"serve": "webpack-dev-server"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack": "^4.0.1",
|
||||
"webpack": "^4.8.0",
|
||||
"webpack-cli": "^2.0.10",
|
||||
"webpack-dev-server": "^3.1.0"
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user