wasm-pack build
Thewasm-pack build command creates the files necessary for JavaScriptinteroperability and for publishing a package to npm. This involves compilingyour code to wasm and generating a pkg folder. This pkg folder will contain thewasm binary, a JS wrapper file, yourREADME, and apackage.json file.
Thepkg directory is automatically.gitignored by default, since it containsbuild artifacts which are not intended to be checked into versioncontrol.0
Path
Thewasm-pack build command can be given an optional path argument, e.g.:
wasm-pack build examples/js-hello-worldThis path should point to a directory that contains aCargo.toml file. If nopath is given, thebuild command will run in the current directory.
Output Directory
By default,wasm-pack will generate a directory for its build output calledpkg.If you'd like to customize this you can use the--out-dir flag.
wasm-pack build --out-dir outThe above command will put your build artifacts in a directory calledout, insteadof the defaultpkg.
Generated file names
Flag--out-name sets the prefix for output file names. If not provided, package name is used instead.
Usage examples, assuming our crate is nameddom:
wasm-pack build# will produce files# dom.d.ts dom.js dom_bg.d.ts dom_bg.wasm package.json README.mdwasm-pack build --out-name index# will produce files# index.d.ts index.js index_bg.d.ts index_bg.wasm package.json README.mdProfile
Thebuild command accepts an optional profile argument: one of--dev,--profiling, or--release. If none is supplied, then--release is used.
This controls whether debug assertions are enabled, debug info is generated, andwhich (if any) optimizations are enabled.
| Profile | Debug Assertions | Debug Info | Optimizations | Notes |
|---|---|---|---|---|
--dev | Yes | Yes | No | Useful for development and debugging. |
--profiling | No | Yes | Yes | Useful when profiling and investigating performance issues. |
--release | No | No | Yes | Useful for shipping to production. |
The--dev profile will build the output package using cargo'sdefaultnon-release profile. Building this way isfaster but applies few optimizations to the output, and enables debug assertionsand other runtime correctness checks. The--profiling and--release profilesuse cargo's release profile, but the former enables debug info as well, whichhelps when investigating performance issues in a profiler.
The exact meaning of the profile flags may evolve as the platform matures.
Target
Thebuild command accepts a--target argument. This will customize the JSthat is emitted and how the WebAssembly files are instantiated and loaded. Formore documentation on the various strategies here, see thedocumentation onusing the compiled output.
wasm-pack build --target nodejs| Option | Usage | Description |
|---|---|---|
not specified orbundler | Bundler | Outputs JS that is suitable for interoperation with a Bundler like Webpack. You'llimport the JS and themodule key is specified inpackage.json.sideEffects: false is by default. |
nodejs | Node.js | Outputs JS that uses CommonJS modules, for use with arequire statement.main key inpackage.json. |
web | Native in browser | Outputs JS that can be natively imported as an ES module in a browser, but the WebAssembly must be manually instantiated and loaded. |
no-modules | Native in browser | Same asweb, except the JS is included on a page and modifies global state, and doesn't support as manywasm-bindgen features asweb |
deno | Deno | Outputs JS that can be natively imported as an ES module in deno. |
Scope
Thebuild command also accepts an optional--scope argument. This will scopeyour package name, which is useful if your package name might conflict withsomething in the public registry. For example:
wasm-pack build examples/js-hello-world --scope testThis command would create apackage.json file for a package called@test/js-hello-world. For more information about scoping, you can refer tothe npm documentationhere.
Mode
Thebuild command accepts an optional--mode argument.
wasm-pack build examples/js-hello-world --mode no-install| Option | Description |
|---|---|
no-install | wasm-pack build implicitly and create wasm binding without installingwasm-bindgen. |
normal | do all the stuffs ofno-install with installedwasm-bindgen. |
Extra options
Thebuild command can pass extra options straight tocargo build even ifthey are not supported in wasm-pack. To use them simply add the extra argumentsat the very end of your command, just as you would forcargo build. Forexample, to build the previous example using cargo's offline feature:
wasm-pack build examples/js-hello-world --mode no-install -- --offline0 If you need to include additional assets in the pkgdirectory and your NPM package, we intend to have a solution for your use casesoon.↩