Setup an NPM Project
Why use NPM?
- Use advanced packaging and minification
- Integrate with any API
- Manage/update/install dependencies easily
- Use other languages like Typescript
Install Node.js, NPM is usually installed with it.
Create a Project
In the root of your Wonderland Engine project, run the following command:
You will be prompted to fill in some additional information, the defaults often suffice.
This will have created a
package.json file, which we will edit in the following
Set up bundling
As we are going to take care of bundling ourselves now, we need to install a bundler using the npm package manager. Because it matches the rapid iteration workflow of Wonderland Engine well, we suggest esbuild.
The bundler will start at an “entrypoint” and recursively parse and include other files.
We will therefore need to create an entrypoint for our bundle: we call it
save it into a
js folder in our project.
We can now edit
package.json and edit as follows:
<PROJECT> with the name you set for your Wonderland Engine project in the project settings.
Switch to NPM Bundling
Go to Views > Project Settings > Java Script and switch from “default bundler” to “npm script”.
You can leave the npmScript setting at default, “build” corresponds to the script we created in our
Instead of automatically bundling everything, we are now required to explicitly select which scripts we want to include.
To include local scripts, you can add lines like these to your
To include editor default components, install the components first:
Then add lines like the following to your
While previously, glMatrix was included globally, this is no longer the case and we can import exactly the parts of the library, that we need.
First, install the
gl-matrix npm package: