# esbuild-plugin-wasm

> A WASM file loader for esbuild.

Latest version **1.1.0** (published 2023-05-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install esbuild-plugin-wasm
pnpm add esbuild-plugin-wasm
yarn add esbuild-plugin-wasm
bun add esbuild-plugin-wasm
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-05-03 |
| First published | 2021-06-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=0.10.0 |
| Dependencies | 0 |
| Unpacked size | 10.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30 |
| Author | Tyler Schrock |
| Maintainers | tschrock123, tschrock |
| Keywords | wasm, webassembly, esbuild, plugin, esbuild-plugin |

## Links

- npm: https://www.npmjs.com/package/esbuild-plugin-wasm
- Repository: https://github.com/Tschrock/esbuild-plugin-wasm
- Homepage: https://github.com/Tschrock/esbuild-plugin-wasm#readme
- Issues: https://github.com/Tschrock/esbuild-plugin-wasm/issues
- Funding: https://ko-fi.com/tschrock
- npm.io page: https://npm.io/package/esbuild-plugin-wasm

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2023-05-03
- 1.0.0 — 2021-06-17

## README

esbuild-plugin-wasm
===================

An asynchronous `.wasm` file loader for [esbuild](https://esbuild.github.io/). This allows you to directly import `.wasm` files as if they were a javascript module, similar to how it works in Webpack.

This plugin follows the [WebAssembly/ES Module Integration](https://github.com/WebAssembly/esm-integration) proposal for loading WebAssembly from a JavaScript import statement.

## Requirements
- esbuild >= 0.11.0
- node >= 10.0.0

### ⚠️ Important Note ⚠️

This loader makes use of top-level await, which only has partial support in esbuild. For now, it is only supported with the `esm` output format, not the `iife` or `cjs` formats. See https://github.com/evanw/esbuild/issues/253

## Installation

```
npm install --save-dev esbuild-plugin-wasm
```

or

```
yarn add --dev esbuild-plugin-wasm
```

## Usage
1. Add it to your esbuild plugins list

    <details>
    <summary>CommonJS</summary>

    ```js
    // build.js
    const esbuild = require('esbuild')
    const { wasmLoader } = require('esbuild-plugin-wasm')

    esbuild.build({
    ...
    plugins: [
        wasmLoader()
    ]
    ...
    });
    ```

    </details>

    <details>
    <summary>ESM</summary>

    ```js
    // build.js
    import esbuild from 'esbuild'
    import { wasmLoader } from 'esbuild-plugin-wasm'

    esbuild.build({
    ...
    plugins: [
        wasmLoader()
    ]
    ...
    });
    ```

    </details>

    <details>
    <summary>Typescript</summary>

    ```ts
    // build.ts
    import esbuild from 'esbuild'
    import { wasmLoader } from 'esbuild-plugin-wasm'

    esbuild.build({
    ...
    plugins: [
        wasmLoader()
    ]
    ...
    });
    ```

    </details>


2. Then import ad use your wasm in your project


    <details>
    <summary>CommonJS</summary>

    ```js
    // app.js
    const wasm = require("./lib.wasm");

    console(wasm.add(1, 2));
    ```

    </details>

    <details>
    <summary>ESM</summary>

    ```js
    // app.js
    import wasm from "./lib.wasm";

    console(wasm.add(1, 2));
    ```

    </details>

    <details>
    <summary>Typescript</summary>

    ```ts
    // app.ts
    import wasm from "./lib.wasm";

    console(wasm.add(1, 2));
    ```

    </details>


## Configuration

```ts
wasmLoader({
    // (Default) Deferred mode copies the WASM binary to the output directory,
    // and then `fetch()`s it at runtime. This is the default mode.
    mode: 'deferred'

    // Embedded mode embeds the WASM binary in the javascript bundle as a
    // base64 string. Note this will greatly bloat the resulting bundle
    // (the binary will take up about 30% more space this way)
    mode: 'embedded'
})
```

---
_Source: https://npm.io/package/esbuild-plugin-wasm · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._