Complete Phaser 3 Game Development Guide: Part 0.5 (Bundling and Compiling)
Tags: gamedev, javascript, beginners, html
Published: 2022-04-04 18:08:50

This article is part of the "Complete Phaser 3 Game Development Guide" series, if you haven't installed Phaser 3 into your game project go to [Part 0](www.example.com). Also this is a **required** section if you are using commonjs to require the Phaser 3 library.

## What's this about?
Since Phaser 3 is a front-end library, the files that we include inside our game file need to be included in the main html file we are using. The problem is, the `require` function is used to import libraries using Node.js and since html doesn't execute code without the use of a browser (hence not using Node.js), this will cause an error in our game not compiling properly or at all!

To solve this, the lovely developer community created tools that **bundle** your Node.js libraries into normal Javascript files that your browser can execute.

In this part of the guide we will complete the following tasks:

* [Install a Bundling Tool](#install-bundle)
* [Bundling Code](#using-bundle)

After this you can go ahead to [Part 1](www.example.com) and continue the tutorial.

## <a name="install-bundle"></a>Installing Bundling Tool
There are a bunch of bundling tools that are used to convert Node.js code into normal Javascript code. The most popular and complete tool is called **webpack**, but it's a "bit to much" for beginners. In this tutorial we will use **browserify**, mostly because of it's simplicity (even though the creator of Phaser doesn't like it...).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bzds7y4j8n9ggxuwne37.png)

Regardless of this, it's a great beginner tool to start with, later (if you want of course) you can move into **webpack**.

To install browserify you just need to use npm and write:

`npm install --save-dev browserify`

on console and install it as development dependency.

And that's it!

## <a name="using-bundle"></a> Bundling Code
After installing browserify as a dependency in your project you can bundle your code with the following command.

`npx browserify game.js -o bundle.js`

Assuming your game is inside a file named game.js, the following command takes your game file (game.js) where you have Phaser 3 included, bundles it and outputs a file called bundle.js (this happens because we used the `-o` or `--outfile` option).

Now instead of including your game.js (that basically uses Node.js libraries) inside your html file, you include your bundle.js into your library.

Basically this works because browserify includes EVERYTHING from the required library into a single Javascript file including your game.js code so that your browser can execute it. This is why it's called **"bundling"**.

And that's it!!

**Optionally**: Since it's so tedious to bundle your game every time you edit something, you can install **watchify** which works exactly the same as browserify, but your bundle.js file is updated everytime you save your game.js file.

Install with the following:
`npm install --save-dev watchify`

Run with the following:
`npx watchify game.js -o bundle.js`

And that's basically it for this section! If you feel comfortable, you can now move on to [Part 1](www.example.com) where we create our first "Hello World" in Phaser 3!