Debugging and using Babylon.js with npm/webpack

[rhys-vdw]

Hi, just started working on my first Bablyon project. I'm planning a client/server model that will share some code between Node and the browser.

I've encountered a couple of pain points, and noticed there is no issues section on GitHub, so I'm guessing this is the proper place to discuss with devs?

The first is pretty major, the npm module uses a minified version of the source as its entry point, which is excruciating to debug! It's impossible to set breakpoints or sometimes to even work out which function is failing. Ideally the project would be distributed as unminified JavaScript that includes source maps. There is no reason to minify code for npm since it will ultimately be handled by the user's build tool (in production only!).

The other problem is that I'd like to use the `Vector3` class (and perhaps others) in my server code. To do so I must "pretend" that `window` and `navigator` exist in the global scope.

global.window = {};
global.navigator = {};
import { Vector3 } from 'babylonjs';

Ideally I'd like to do something like this:

import { Vector3 } from 'babylonjs/Math';

That is not possible since the unminified source is not supplied in the package, and if I understand correctly, does not use the node module system anyway. Since the file `babylon/src/Math` actually doesn't require access to `window` etc. this should be fine. It could potentially make sense to split `Vector3` into its own repo and have it as a dependency of babylon?

Is there any interest or discussion in this area? How do other people debug the minified code?

[GameMonetize]

Hello!

we provide unminified version to debug: https://github.com/BabylonJS/Babylon.js/blob/master/dist/babylon.2.2.max.js

To get the best debugging experience, you can also reference manually all files:

http://doc.babylonjs.com/generals/Creating_the_Mini-fied_Version

 

Regarding math.js, why not just referencing it directly?

https://github.com/BabylonJS/Babylon.js/blob/master/src/Math/babylon.math.js

 

[rhys-vdw]

Hi Dalkatosh, thanks for the response. My post above is really regarding the npm module structure, perhaps I should have posted it to bugs?

Quote

we provide unminified version to debug: https://github.com/BabylonJS/Babylon.js/blob/master/dist/babylon.2.2.max.js

Great, thanks. I can access the unminified code via:

var BABYLON = require('babylonjs/babylon.max');
// or with ES import semantics
import BABYLON from 'babylonjs/babylon.max';

However, minifcation breaks convention for npm distributions, and provides no benefits to the library consumer. Normally `babylon.js` would be unminified and unconcatenated, with the entry point named as `main` in `package.json`. Babylon does not use module syntax internally. Each file just assigns its code to `window.BABYLON`. So currently it's not possible to maintain the file structure in the package. However simply providing the unminified code as the `main` file would be an improvement.

Quote

Regarding math.js, why not just referencing it directly?

`math.js` is not included in the npm module, and could not be imported in isolation due to lack of modules.

It is possible to use npm modules in TypeScript. There is an example  here.

I understand NPM support wouldn't be a high priority as a front end library, but build tools such as WebKit and and Browserify are quite popular these days.

[rhys-vdw]

Also if you're interested in this kind of change I'm willing to find time to provide a PR adding in module exports and imports in Babylon.

[GameMonetize]

For sure! If this could help others and do not break anything, please do. I will validate the PR with pleasure

[rhys-vdw]

Delkatosh, great. sorry for the slow replies, it seems this website doesn't send email alerts for responses? I'm putting the project on hold for a few weeks, but it's definitely going to be using Babylon.js, so I'll look into it when I get back into it. I've been meaning to check out TypeScript for a while so I look forward to it.

[GameMonetize]

no worry  We all have a life !

[Swayed]

Hello! Long time lurker, first time poster!

I wanted to jump in and say that I'm also interested in the outcome of this, and have read post from several other people asking for somewhat the same thing. The general idea seems to be a "nodejs" version of babylonjs that has the same objects and functionality as babylonjs, but without the rendering code. 

For example, one could run babylon code in nodejs, using the vector3, CreateScene, meshes, rotations, raytracers, moveWithCollisions, but without any of the visual rendering (no window, light sources, shadows, camera, textures, mapping, etc). Clients would have active replication using the same babylonjs framework, but with the visual appeal that the full babylonjs offers.

Does this make sense, or is even possible? 

Thanks!