@pixel-engine/cli

Minimalist build tool inspired by create-react-app and next.js

Usage

Setup

Install

npm install @pixel-engine/cli --dev

And add scripts to your package.json like this

{
  "scripts": {
    "dev": "pixel",
    "build": "pixel build",
    "start": "pixel start"
  }
}

After that create your entry file (default ./src/main.js) and your up and running.

// ./src/main.js

class Game {
  ...
}

document.addEventListener('DOMContentLoaded', () => {
  const game = new Game()
}, false)

Static resources

Static resources are added in your assets directory (default ./res) you then request the resources as you normally would, eg.

const loadMap = () =>
  fetch('/res/map.json')
    .then(res => res.json())
    .then(data => new TileMap(data))

const loadImage = () =>
  new Promise((res, rej) => {
    const img = new Image()
    img.onload = () => res(img)
    img.onerror = err => rej(err)
    img.src = '/res/myimage.png'
  })

Configuration

If the default folder structure don't work with your project, then you can configure some basic options in two ways.

Using a pixel.config.js file:

module.exports = {
  main: './lib/index.js',
  assets: './assets',
}

Using cli options (inspect each command using the --help, -h flag):

npx pixel dev --main ./lib/index.js -p 9090

Options provided via cli arguments have higher precedence than options provided in the pixel.config.js file

Options

pixel.config.js property	CLI argument	Type	Default	Description
port	port, -p	Number	1337	Port number to run server at (webpack-serve option)
host	hostname, -H	String	localhost	Host name to run the server at (webpack-serve option)
main	main, -m	String	./src/main.js	Entry file (webpack option)
assets	assets, -a	String	./res	Assets directory (copy-webpack-plugin option)
template	template, -t	String	./index.html	HTML template to use (html-webpack-plugin option)
dist	dist, -d	String	./dist	Output directory when building (webpack option)
plugins		Array	[]	List of plugins (not used atm)
webpack		Function	null	Function that can be used to extend webpack configuration

Override webpack functionality

You can extend the webpack configuration by using the pixel.config.js file

// pixel.config.js
const webpack = require('webpack')

module.exports = {
  /**
   * @param {Object} webpackConfig The webpack config object
   * @param {String} dir           Working dir
   * @param {Boolean} dev          Development or production mode
   * @param {Object} config        Configuration object as provided by
   *                               default options => pixel.config.js => cli args
   * @param {Object} defaultLoader Object with defaultLoaders
   */
  webpack: (webpackConfig, { dir, dev, config, defaultLoaders }) => {
    // Add the decorators plugin
    defaultLoaders.babel.options.plugins.push('@babel/plugin-proposal-decorators')

    if (!dev) {
      // Add a top banner to your minifed code
      webpackConfig.plugins.push(new webpack.BannerPlugin({
        banner: 'This is a minifed build of: ' +
          'https://github.com/you/your-awesome-oss-game-code'
      }))
    }

    return webpackConfig
  }
}