Issues when creating a small FOSS Phaser.io UI library

[JTronLabs]

I am trying to create a UI library with some useful in-game components: ProgressBar, ToggleSlider, Toast, etc. so I can re-use these across projects and to save other people from having to write these components themselves. I am having some trouble testing it tho, it looks like my NPM library does not have access to the Phaser.io game engine. Does anyone know what might be going wrong?

Stack overflow post with more info here

Component GitHub repo here

[drhayes]

Try some things:

In this file try sticking "console.log(Phaser);" near the top, re-package it, and see what changes in the project where you're using it. Do you see a reference to Phaser getting logged, or something else?

How are you testing your components? Is that project including the same version of Phaser that your components use? Based on that webpack.config.js Phaser isn't going to get packaged in your distributed JS file (that's what you want!).

[JTronLabs]

Hey there, thanks for responding! That didn't seem to have any effect unfortunately, same errors and same webpack output (I think). If I instead add "import Phaser from 'phaser-ce' ", Phaser.io will be added to the webpack build, but I encounter the same errors in the test game!

The test and the src projects use the same version of phaser-ce. I intend to test the components using the Phaser game in the test/ directory (which depends the "phaser-ui" NPM package via a relative, local link in its very own package.json)

[ldd]

1) you are not importing phaser properly. Phaser is weird in that it basically needs the same setup as jquery to function with webpack.

at the top of EVERY file where you use phaser:

import Phaser from 'phaser'

For webpack 2, https://github.com/lean/phaser-es6-webpack/blob/master/webpack.config.js

For webpack 1, I think the only change would be 

module.rules => module.loaders

So instead of 'rules' you should use 'loaders' inside the configuration file I have just referenced

[JTronLabs]

Thank you for looking it over! I just added file-specific imports and pushed to GitHub. Unfortunately I am experiencing the same error. When I import Webpack finds Phaser just fine from the node_modules and includes it in the output.

Also, the consumer of the library should include Phaser, so if I include it in my bundle it will be in the final game output twice. I want some way to not include Phaser in the library output but h still have it accessible when used by a consumer.

[JTronLabs]

Looks like it has something to do with WebPack externals, though I have not hit upon a winning configuration yet - https://webpack.js.org/configuration/externals/

 

Edit: I discovered the reason including all of Phaser didn't work. It seems my test project was using an old version of the `phaser-ui` library - my scripts for using a local project are not configured correctly, fixing that now.

[rblopes]

HI, @JTronLabs.

I sent you a pull request last night with some modifications that may help you solve your problem.

Your test project is using the "No Physics" custom build that omits, among Arcade and P2 physics engines, several other features, including:

• Tiled Tilemaps support;
• The Weapons Plugin; and
• The Particles system.

I don't know how much these features are related or how they specifically depend on Arcade Physics. At least, for the Weapons plugin it does make sense to omit it, I'm not convinced about the others, though. But this is how Phaser 2 was designed, and I won't discuss it here further. (I bet someone could figure out a way and make Tilemaps or Particles no longer tied to AP.)

So, even if you add Phaser as an external dependency to your library, that may not help you much. If your component depends on a class that's not included in a Phaser build (which is causing the "class extends undefined" issue), it'll just fail to load. So your best bet there is to include, at least, some kind of feature detection.

Hope that helps.
 

[JTronLabs]

K so I got it halfway working. I changed my test script to properly reinstall the package in the test dir each time: 

PHASER-UI's package.json

  "scripts": {
    "test": "npm run build && cd test && npm install phaser-ui && npm start",
    "build": "webpack"
  },

The test package installs phaser-ui from a local NPM directory

TEST's package.json

  "dependencies": {
    "phaser-ce": "^2.7.0",
    "phaser-ui": "file:../"
  },

Then, I included the 'Phaser' variable as an external in my webpack

var webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        path: 'build/',
        filename: 'phaser-ui.js'
    },
    externals: {
        Phaser: 'Phaser'
    }
};

So now it builds successfully and seems to work. The issue is that I don't know how to consume it in my game state. Importing and logging it only shows a generic object in the console

import * as lib from 'phaser-ui';

export default class Game extends Phaser.State {

  create() {
    console.log(lib)
  }

}

 

[JTronLabs]

@rblopes PMd me and we were able to figure it out. I needed to add library and libraryTarget configuration to webpack.config.js's output property. Full write up in StackOverflow post - http://stackoverflow.com/a/42302282/4180797 - THANKS FOR YOUR HELP EVERYONE!