Setup an NPM Project

Wonderland Engine comes with a convenient integrated JavaScript bundler, but there might come a day where you want to switch from convenient to more explicit control:

Why use NPM? 

Node Package Manager comes with a huge ecosystem of JavaScript packages, which allow you to:

  • Use advanced packaging and minification
  • Integrate with any API
  • Manage/update/install dependencies easily
  • Use other languages like Typescript

Prerequisites 

Install Node.js, NPM is usually installed with it.

Create a Project 

In the root of your Wonderland Engine project, run the following command:

1npm init

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 step.

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.

1npm i --save-dev 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 bundle.js and save it into a js folder in our project.

We can now edit package.json and edit as follows:

1   "scripts": {
2-     "test": "echo \"Error: no test specified\" && exit 1"
3+     "build": "esbuild ./js/bundle.js --minify --sourcemap --bundle --outfile=\"deploy/<PROJECT>-bundle.js\""
4   },

Replace <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 package.json file.

Add Scripts 

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 bundle.js:

1require('./my-component.js')

To include editor default components, install the components first:

1npm i --save @wonderlandengine/components

Then add lines like the following to your bundle.js:

1require('@wonderlandengine/components/cursor');
2require('@wonderlandengine/components/cursor-target');
3require('@wonderlandengine/components/wasd-controls');
4require('@wonderlandengine/components/hand-tracking');
5require('@wonderlandengine/components/mouse-look');

Using glMatrix 

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:

1npm i --save gl-matrix

Then import the parts you need in your JavaScript component:

 1import { vec3 } from 'gl-matrix';
 2import { Component } from '@wonderlandengine/api';
 3
 4export class MathTest extends Component {
 5    static TypeName = 'math-test';
 6    static Properties = {
 7        /* ... */
 8    }
 9    /* ... */
10};