|
1 | 1 | ---
|
2 | 2 | order: 1
|
3 |
| -summary: WebAssembly/WASM with Denoflare |
| 3 | +summary: WebAssembly/Wasm with Denoflare |
4 | 4 | type: overview
|
5 | 5 | ---
|
6 | 6 |
|
7 |
| -# WebAssembly/WASM |
| 7 | +# WebAssembly/Wasm |
8 | 8 |
|
9 | 9 | Cloudflare Workers supports running small WebAssembly modules within either [script-based](https://blog.cloudflare.com/webassembly-on-cloudflare-workers/) or [module-based](https://blog.cloudflare.com/workers-javascript-modules/#are-there-non-javascript-modules) workers.
|
10 | 10 |
|
11 | 11 | Denoflare provides a simple way to serve and deploy workers with WebAssembly components, building on Deno's [built-in WebAssembly support](https://deno.land/manual@v1.22.0/webassembly).
|
12 | 12 |
|
13 | 13 | ## Module-based workers
|
14 | 14 |
|
15 |
| -For module-based Cloudflare Workers, Cloudflare requires WASM to be specified with an ES6 import of the form `import module from "./hello.wasm"` (`module` is then a [WebAssembly.Module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module)). |
| 15 | +For module-based Cloudflare Workers, Cloudflare requires Wasm to be specified with an ES6 import of the form `import module from "./hello.wasm"` (`module` is then a [WebAssembly.Module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module)). |
16 | 16 |
|
17 | 17 | Since this is not valid in browsers/Deno, nor valid under the [proposed WebAssembly/ES Module Integration](https://github.com/WebAssembly/esm-integration/tree/main/proposals/esm-integration#webassemblyes-module-integration), Denoflare needs to slighty modify the standard bundled module worker it uploads to Cloudflare during a `denoflare push`.
|
18 | 18 |
|
19 | 19 | It also needs to have syntax that will run in `denoflare serve` in both local isolation modes, as well incorporate well into other Deno projects unrelated to Denoflare.
|
20 | 20 |
|
21 |
| -To accomplish this, Denoflare provides a special function called `importWasm` that will load WASM properly in Deno and both modes of `denoflare serve`, and will be rewritten during `denoflare push` to the syntax required by Cloudflare. `importWasm` is just a [small standard Deno function](https://github.com/skymethod/denoflare/blob/v0.5.2/common/import_wasm.ts), it builds on [import.meta.url](https://deno.land/manual/examples/module_metadata) and Deno's recent support for local file:// `fetch`. |
| 21 | +To accomplish this, Denoflare provides a special function called `importWasm` that will load Wasm properly in Deno and both modes of `denoflare serve`, and will be rewritten during `denoflare push` to the syntax required by Cloudflare. `importWasm` is just a [small standard Deno function](https://github.com/skymethod/denoflare/blob/v0.5.2/common/import_wasm.ts), it builds on [import.meta.url](https://deno.land/manual/examples/module_metadata) and Deno's recent support for local file:// `fetch`. |
22 | 22 |
|
23 | 23 | *worker.ts*
|
24 | 24 | ```ts
|
@@ -48,7 +48,7 @@ See the [hello-wasm-worker example](https://github.com/skymethod/denoflare/blob/
|
48 | 48 |
|
49 | 49 | ## Script-based workers
|
50 | 50 |
|
51 |
| -For the older script-based Cloudflare Workers, WebAssembly modules are injected using [global environment variable variable bindings](https://developers.cloudflare.com/workers/platform/environment-variables). |
| 51 | +For the older script-based Cloudflare Workers, WebAssembly modules are injected using [global environment variable bindings](https://developers.cloudflare.com/workers/platform/environment-variables). |
52 | 52 |
|
53 | 53 | Define your environment variable name and `wasmModule` in the script's `bindings` section in your [.denoflare configuration file](/cli/configuration), then use the injected global variable at runtime, it will be a [WebAssembly.Module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module).
|
54 | 54 |
|
@@ -82,3 +82,7 @@ async function safeHandleRequest(event) {
|
82 | 82 | }
|
83 | 83 | }
|
84 | 84 | ```
|
| 85 | + |
| 86 | +## More |
| 87 | + |
| 88 | +- See [Transform Images with Wasm](/examples/transform-images-wasm) for a larger example of using an existing Wasm library inside a worker. |
0 commit comments