fork of https://github.com/rustwasm/wasm-pack for the needs of NextGraph.org
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.3 KiB
70 lines
2.3 KiB
# Run The Code From npm
|
|
|
|
This portion of the tutorial will help you create a [Webpack] JavaScript project that will
|
|
run your WebAssembly code in the browser.
|
|
|
|
[Webpack]: https://webpack.js.org/
|
|
|
|
## Scaffold a JavaScript Project
|
|
|
|
To scaffold a project that we can use our new package in, we'll use an npm template called
|
|
[`create-wasm-app`]. To use this run this command in a directory *different* than your Rust
|
|
project:
|
|
|
|
[`create-wasm-app`]: https://github.com/rustwasm/create-wasm-app
|
|
|
|
```
|
|
npm init wasm-app
|
|
```
|
|
|
|
This tool will ask you for the name of a project, and then create a directory with that name.
|
|
|
|
If we look in that directory, we'll see the following:
|
|
|
|
- `.gitignore`: ignores `node_modules`
|
|
- `LICENSE-APACHE` and `LICENSE-MIT`: most Rust projects are licensed this way, so these are included for you
|
|
- `README.md`: the file you are reading now!
|
|
- `index.html`: a bare bones html document that includes the webpack bundle
|
|
- `index.js`: example js file with a comment showing how to import and use a wasm pkg
|
|
- `package.json` and `package-lock.json`:
|
|
- pulls in devDependencies for using webpack:
|
|
- [`webpack`](https://www.npmjs.com/package/webpack)
|
|
- [`webpack-cli`](https://www.npmjs.com/package/webpack-cli)
|
|
- [`webpack-dev-server`](https://www.npmjs.com/package/webpack-dev-server)
|
|
- defines a `start` script to run `webpack-dev-server`
|
|
- `webpack.config.js`: configuration file for bundling your js with webpack
|
|
|
|
## Add Your npm Package
|
|
|
|
The scaffolded project includes an example WebAssembly package, `hello-wasm-pack`, in your
|
|
`package.json`. Go into the `package.json` file, add your package, and remove the
|
|
`hello-wasm-pack` dependency from the `"dependencies"` section.
|
|
|
|
Now, open up the `index.js` file. Replace the `hello-wasm-pack` in the first line with the
|
|
name of your package:
|
|
|
|
```js
|
|
import * as wasm from "<your package name>";
|
|
|
|
wasm.greet();
|
|
```
|
|
|
|
## Run The Project
|
|
|
|
Before we run our project, we need to make sure we install our dependencies:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
We should be ready to run our project now! To run our project we'll run:
|
|
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
Then in a web browser navigate to `http://localhost:8080` and you should be greeted with an
|
|
alert box that says "Hello World!".
|
|
|
|
If you did congrats you've successfully uploaded your first bit of wasm code to npm and used it
|
|
properly!
|
|
|