mirror of
https://github.com/rustwasm/wasm-bindgen.git
synced 2024-11-28 05:52:21 +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!`
|
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
|
dialog pop up!
|
||||||
webpack issue. See [the hello_world README][hello-readme] for a workaround.
|
|
||||||
|
|
||||||
If that was all a bit much, no worries! You can [execute this code
|
If that was all a bit much, no worries! You can [execute this code
|
||||||
online][hello-online] thanks to [WebAssembly Studio](https://webassembly.studio)
|
online][hello-online] thanks to [WebAssembly Studio](https://webassembly.studio)
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
"serve": "webpack-dev-server"
|
"serve": "webpack-dev-server"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"webpack": "^4.0.1",
|
"webpack": "^4.8.0",
|
||||||
"webpack-cli": "^2.0.10",
|
"webpack-cli": "^2.0.10",
|
||||||
"webpack-dev-server": "^3.1.0"
|
"webpack-dev-server": "^3.1.0"
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
"serve": "webpack-dev-server"
|
"serve": "webpack-dev-server"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"webpack": "^4.0.1",
|
"webpack": "^4.8.0",
|
||||||
"webpack-cli": "^2.0.10",
|
"webpack-cli": "^2.0.10",
|
||||||
"webpack-dev-server": "^3.1.0"
|
"webpack-dev-server": "^3.1.0"
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
"serve": "webpack-dev-server"
|
"serve": "webpack-dev-server"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"webpack": "^4.0.1",
|
"webpack": "^4.8.0",
|
||||||
"webpack-cli": "^2.0.10",
|
"webpack-cli": "^2.0.10",
|
||||||
"webpack-dev-server": "^3.1.0"
|
"webpack-dev-server": "^3.1.0"
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
"serve": "webpack-dev-server"
|
"serve": "webpack-dev-server"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"webpack": "^4.0.1",
|
"webpack": "^4.8.0",
|
||||||
"webpack-cli": "^2.0.10",
|
"webpack-cli": "^2.0.10",
|
||||||
"webpack-dev-server": "^3.1.0"
|
"webpack-dev-server": "^3.1.0"
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
"serve": "webpack-dev-server"
|
"serve": "webpack-dev-server"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"webpack": "^4.0.1",
|
"webpack": "^4.8.0",
|
||||||
"webpack-cli": "^2.0.10",
|
"webpack-cli": "^2.0.10",
|
||||||
"webpack-dev-server": "^3.1.0"
|
"webpack-dev-server": "^3.1.0"
|
||||||
}
|
}
|
||||||
|
@ -14,35 +14,3 @@ $ ./build.sh
|
|||||||
(or running the two commands on Windows manually)
|
(or running the two commands on Windows manually)
|
||||||
|
|
||||||
and then opening up `index.html` in a web browser should show a dialog!
|
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"
|
"serve": "webpack-dev-server"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"webpack": "^4.0.1",
|
"webpack": "^4.8.0",
|
||||||
"webpack-cli": "^2.0.10",
|
"webpack-cli": "^2.0.10",
|
||||||
"webpack-dev-server": "^3.1.0"
|
"webpack-dev-server": "^3.1.0"
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
"serve": "webpack-dev-server"
|
"serve": "webpack-dev-server"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"webpack": "^4.0.1",
|
"webpack": "^4.8.0",
|
||||||
"webpack-cli": "^2.0.10",
|
"webpack-cli": "^2.0.10",
|
||||||
"webpack-dev-server": "^3.1.0"
|
"webpack-dev-server": "^3.1.0"
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
"serve": "webpack-dev-server"
|
"serve": "webpack-dev-server"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"webpack": "^4.0.1",
|
"webpack": "^4.8.0",
|
||||||
"webpack-cli": "^2.0.10",
|
"webpack-cli": "^2.0.10",
|
||||||
"webpack-dev-server": "^3.1.0"
|
"webpack-dev-server": "^3.1.0"
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
"serve": "webpack-dev-server"
|
"serve": "webpack-dev-server"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"webpack": "^4.0.1",
|
"webpack": "^4.8.0",
|
||||||
"webpack-cli": "^2.0.10",
|
"webpack-cli": "^2.0.10",
|
||||||
"webpack-dev-server": "^3.1.0"
|
"webpack-dev-server": "^3.1.0"
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
"serve": "webpack-dev-server"
|
"serve": "webpack-dev-server"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"webpack": "^4.0.1",
|
"webpack": "^4.8.0",
|
||||||
"webpack-cli": "^2.0.10",
|
"webpack-cli": "^2.0.10",
|
||||||
"webpack-dev-server": "^3.1.0"
|
"webpack-dev-server": "^3.1.0"
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user