Without a Bundler

View full source code

This example shows how the --target web flag can be used load code in a browser directly. For this deployment strategy bundlers like Webpack are not required. For more information on deployment see the dedicated documentation.

First, you'll need to add web-sys to your Cargo.toml.

[dependencies.web-sys]
version = "0.3.4"
features = [
  'Document',
  'Element',
  'HtmlElement',
  'Node',
  'Window',
]

Then, let‘s take a look at the code and see how when we’re using --target web we're not actually losing any functionality!

{{#include ../../../examples/without-a-bundler/src/lib.rs}}

Otherwise the rest of the deployment magic happens in index.html:

{{#include ../../../examples/without-a-bundler/index.html}}

And that's it! Be sure to read up on the deployment options to see what it means to deploy without a bundler.

Using the older `--target no-modules`

View full source code

The older version of using wasm-bindgen without a bundler is to use the --target no-modules flag to the wasm-bindgen CLI.

While similar to the newer --target web, the --target no-modules flag has a few caveats:

It does not support local JS snippets
It does not generate an ES module
It does not support --split-linked-modules outside of a document, e.g. inside a worker

With that in mind the main difference is how the wasm/JS code is loaded, and here's an example of loading the output of wasm-pack for the same module as above.

{{#include ../../../examples/without-a-bundler-no-modules/index.html}}

Without a Bundler

Using the older --target no-modules

Using the older `--target no-modules`