Using --no-modules - The `wasm-bindgen` Guide

View full source code

This example shows how the --no-modules flag can be used load code in a browser directly (using the same code as the hello world example). Most of the magic happens in index.html:

<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
  </head>
  <body>
    <script>
      // The `--no-modules`-generated JS from `wasm-bindgen` attempts to use
      // `WebAssembly.instantiateStreaming` to instantiate the wasm module,
      // but this doesn't work with `file://` urls. This example is frequently
      // viewed by simply opening `index.html` in a browser (with a `file://`
      // url), so it would fail if we were to call this function!
      //
      // Work around this for now by deleting the function to ensure that the
      // `no_modules.js` script doesn't have access to it. You won't need this
      // hack when deploying over HTTP.
      delete WebAssembly.instantiateStreaming;
    </script>

    <!-- this is the JS generated by the `wasm-bindgen` CLI tool -->
    <script src='./no_modules.js'></script>

    <script>
      window.addEventListener('load', async () => {
          // the `wasm_bindgen` global is set to the exports of the Rust module
          //
          // here we tell bindgen the path to the wasm file so it can run
          // initialization and return to us a promise when it's done
          // also, we can use 'await' on the returned promise
          await wasm_bindgen('./no_modules_bg.wasm');
      });
    </script>
  </body>
</html>

And that's it! It's worth pointing out that if #[wasm_bindgen(module = "...")] imports are used then wasm-bindgen --no-modules will fail (as it doesn't know how to import modules).