3. Webpack bundle colyseus typescript

Webpack bundle colyseus typescript

0
H
halome

Hey,

have anyone of you ever used Webpack with colyseus? I am trying to pack it to the bundle.js file but i have got a lot of errors.
If you know how to do that (have proper configs/package.json/webpack.config.js) then please let me know

Cheers!

0
H
halome

i forgot to show you errors and my configuration

errors:

WARNING in ./node_modules/cluster/lib/master.js
133:18-52 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/cluster/lib/master.js
 @ ./node_modules/cluster/lib/cluster.js
 @ ./node_modules/cluster/index.js
 @ ./node_modules/colyseus/lib/ClusterServer.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

WARNING in ./node_modules/express/lib/view.js
81:13-25 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/express/lib/view.js
 @ ./node_modules/express/lib/application.js
 @ ./node_modules/express/lib/express.js
 @ ./node_modules/express/index.js
 @ ./index.ts

WARNING in ./node_modules/uws/uws_linux_46.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/colyseus/lib/Server.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

WARNING in ./node_modules/uws/uws_linux_47.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/colyseus/lib/Server.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

WARNING in ./node_modules/uws/uws_linux_57.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/colyseus/lib/Server.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

WARNING in ./node_modules/uws/uws_linux_48.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/colyseus/lib/Server.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

WARNING in ./node_modules/uws/uws_linux_51.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/colyseus/lib/Server.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

WARNING in ./node_modules/uws/uws_darwin_46.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/colyseus/lib/Server.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

WARNING in ./node_modules/uws/uws_darwin_48.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/colyseus/lib/Server.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

WARNING in ./node_modules/uws/uws_darwin_57.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/colyseus/lib/Server.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

WARNING in ./node_modules/uws/uws_darwin_47.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/colyseus/lib/Server.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

WARNING in ./node_modules/uws/uws_darwin_51.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/colyseus/lib/Server.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

WARNING in ./node_modules/uws/uws_win32_48.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/colyseus/lib/Server.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

WARNING in ./node_modules/uws/uws_win32_51.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/colyseus/lib/Server.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

WARNING in ./node_modules/uws/uws_win32_57.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/colyseus/lib/Server.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

ERROR in ./node_modules/cluster/lib/master.js
Module not found: Error: Can't resolve 'child_process' in 'D:\projekty\unity\UnitySocketIO\server_colyseus_typescript_phaser\node_modules\cluster\lib'
 @ ./node_modules/cluster/lib/master.js 15:12-36
 @ ./node_modules/cluster/lib/cluster.js
 @ ./node_modules/cluster/index.js
 @ ./node_modules/colyseus/lib/ClusterServer.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

ERROR in ./node_modules/cluster/lib/worker.js
Module not found: Error: Can't resolve 'child_process' in 'D:\projekty\unity\UnitySocketIO\server_colyseus_typescript_phaser\node_modules\cluster\lib'
 @ ./node_modules/cluster/lib/worker.js 13:12-36
 @ ./node_modules/cluster/lib/master.js
 @ ./node_modules/cluster/lib/cluster.js
 @ ./node_modules/cluster/index.js
 @ ./node_modules/colyseus/lib/ClusterServer.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

ERROR in ./node_modules/colyseus/lib/cluster/Master.js
Module not found: Error: Can't resolve 'child_process' in 'D:\projekty\unity\UnitySocketIO\server_colyseus_typescript_phaser\node_modules\colyseus\lib\cluster'
 @ ./node_modules/colyseus/lib/cluster/Master.js 5:20-44
 @ ./node_modules/colyseus/lib/ClusterServer.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

ERROR in ./node_modules/cluster/lib/master.js
Module not found: Error: Can't resolve 'dgram' in 'D:\projekty\unity\UnitySocketIO\server_colyseus_typescript_phaser\node_modules\cluster\lib'
 @ ./node_modules/cluster/lib/master.js 25:12-28
 @ ./node_modules/cluster/lib/cluster.js
 @ ./node_modules/cluster/index.js
 @ ./node_modules/colyseus/lib/ClusterServer.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

ERROR in ./node_modules/cluster/lib/master.js
Module not found: Error: Can't resolve 'dns' in 'D:\projekty\unity\UnitySocketIO\server_colyseus_typescript_phaser\node_modules\cluster\lib'
 @ ./node_modules/cluster/lib/master.js 440:6-20
 @ ./node_modules/cluster/lib/cluster.js
 @ ./node_modules/cluster/index.js
 @ ./node_modules/colyseus/lib/ClusterServer.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts

ERROR in ./node_modules/cluster/lib/plugins/repl.js
Module not found: Error: Can't resolve 'repl' in 'D:\projekty\unity\UnitySocketIO\server_colyseus_typescript_phaser\node_modules\cluster\lib\plugins'
 @ ./node_modules/cluster/lib/plugins/repl.js 13:11-26
 @ ./node_modules/cluster/lib/plugins ^\.\/.*$
 @ ./node_modules/cluster/lib/cluster.js
 @ ./node_modules/cluster/index.js
 @ ./node_modules/colyseus/lib/ClusterServer.js
 @ ./node_modules/colyseus/lib/index.js
 @ ./index.ts
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! colyseus-examples@1.0.0 webpack:dev: `webpack --config webpack.config.dev.js --progress --colors`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the colyseus-examples@1.0.0 webpack:dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Rafal\AppData\Roaming\npm-cache\_logs\2018-01-21T20_32_39_923Z-debug.log

webpack.config

const webpack = require('webpack');
const path = require('path');

const phaserModule = path.join(__dirname, '/node_modules/phaser-ce/build/custom/');
const assets = path.join(__dirname, 'assets/');
const phaser = path.join(phaserModule, 'phaser-split.js'); 
const pixi = path.join(phaserModule, 'pixi.js');
const p2 = path.join(phaserModule, 'p2.js');

module.exports = {
    entry: path.join(__dirname, 'index.ts'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'server.js'
    },

    module: {
        rules: [
            { test: /\.ts$/, enforce: 'pre', loader: 'tslint-loader' },
            { test: /assets(\/|\\)/, loader: 'file-loader?name=assets/[hash].[ext]' },
            { test: /pixi\.js$/, loader: 'expose-loader?PIXI' },
            { test: /phaser-split\.js$/, loader: 'expose-loader?Phaser' },
            { test: /p2\.js$/, loader: 'expose-loader?p2' },
            { test: /\.ts$/, loader: 'ts-loader', exclude: '/node_modules/' }
        ]
    },

    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
    },

    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            pixi: path.join(__dirname, 'node_modules/phaser-ce/build/custom/pixi.js'),
            phaser: path.join(__dirname, 'node_modules/phaser-ce/build/custom/phaser-split.js'),
            p2: path.join(__dirname, 'node_modules/phaser-ce/build/custom/p2.js'),
            assets: path.join(__dirname, 'assets/')
        }
    },

    devtool: 'source-map',
};
0
endel
endel
administrator

Hi @halome,

It seems you're trying to import the server module (colyseus). Try importing the client-side one instead colyseus.js.

Let me know if that works for you.
Cheers!

0
H
halome

Hi @endel
but i want to use server-side :)

0
H
halome

Ok, i am trying to build phaser as local module right now and import that via npm, seems like it hase sense

0
H
halome

Nah, dont working

0
H
halome

@endel
What i am trying is to combine Colyseus server with Phaser.
I wish to make that in TypeScript so that's why i am doing that with webpack because otherwise Phaser-ce wouldnt work because there is some troubles with PIXI there.
So i am trying to pack everything with Webpack but then i got those errors i sent earlier.
Try to build app with Colyseus server + Phaser-CE :)

0
endel
endel
administrator

@halome AFAIK it's not possible to load Phaser on server-side. It relies heavily on the browser environment. You may be able to load it by using jsdom.

It's not a recommended to compile server code with webpack.

On the client-side you'd need to load the Colyseus client instead (colyseus.js package)

0
H
halome

@endel

I want to create client with Phaser so i thought it would be good idea to have Phaser on server side too, so the physics and whole logic would be on server etc.
So how to make that properly? Maybe i should create some kind of HEADLESS Phaser client that will be treat as another server that the Colysues one will ask for every states? What do you thing about that or please let me know what is the best proper way. I dont want to give client physics to simulate etc.

0
endel
endel
administrator

@halome I see. That's alright! Having a "headless" Phaser would be ideal to leverage its physics engine and such. I personally haven't runned Phaser on node environment yet. I hope it's achievable without too much effort. Let me know about your results!

0
H
halome

@endel
Ok, so i ended up with p2.js on the server side and this is working and looking really great.
Synchro between clients is perfectly matched and its really lightweigt :)
When i will make something trully playable then i can provide that to you so you could put that as example if you want to :)

Please take a look at this gif: https://imgur.com/7t17Qfw

Cheers

0
endel
endel
administrator

Awesome @halome, it's looking good! Another option would be MatterJS: https://github.com/liabru/matter-js

Good luck with your project! Don't hesitate if you need any help with Colyseus here!