BabylonJS + Webpack

[mop]

Hi,

 

I just switched to webpack in one of my babylon.js projects and found a few oddities:

 

1. src version as "main" in package.json

 

This is not only webpack related. As far as I am aware libraries should not refer to a minimized version here. Browserify, webpack and the likes will do minification if desired. I couldn't find the package.json in the git repository. Would have created a pull request but it doesn't seem to be there

 

2. "use strict";

 

As my project is ES2015 I am using babel to transpile it back to es5. During this process babel will prepend a "use strict" to every script (for whatever reason ). I am cloning a few meshes in my project and I think it found a possible bug there:

 

Uncaught (in promise) TypeError: Cannot set property hasLODLevels of #<r> which has only a getter

    at Function.r.DeepCopy (http://localhost:8080/output.js:20748:93937)

    at new r (http://localhost:8080/output.js:20748:333962)

    at r.clone (http://localhost:8080/output.js:20748:349913)

    at http://localhost:8080/output.js:20274:35

 

The problem here is that DeepCopy will iterate over all properties and copy the value to the cloned mesh. This includes all the properties defined via Object.defineProperty However they are getters only and thus it throws an error here. That makes perfect sense. Maybe babylon.js should always include "use strict"?  Maybe there are more potential bugs hiding out there

 

Currently I am just ignoring babylon.js while building.

[davrous]

Hi!

We're using TypeScript to build Babylon.Js which is much more strict than "use strict" but maybe we've missed something. We will check that.

Thanks for the head up!

David

[fenomas]

Hey mop, I've just been moving my project to webpack as well. Really powerful, although some of the configuration is really hairy.

 

About 1. package.json - right now Babylon.js is not set up to be required as a module. So even if there was a package.json and it specified an entry point, webpack (or alternatives like browserify) wouldn't be able to resolve it as a dependency.

 

What you can do is get webpack to consider a pre-made babylon file as a (static) dependency of your project, so that it gets copied into the distribution (and handled by webpack-dev-server). I'm doing this with the file-loader module. For example, if you put a minified babylon file in /external/ , you could then add this anywhere in your javascript:

require('file?name=b.js!./external/babylon.2.3.min.js'); 

and change your html to reference the script from webpack:

<script type="text/javascript" src="b.js"><script> 

This way webpack will treat babylon as a dependency, but not parse it for dependencies or minifiy it or add strict markers and so forth (which is realistically for the best).

[mop]

Hey mop, I've just been moving my project to webpack as well. Really powerful, although some of the configuration is really hairy.

 

About 1. package.json - right now Babylon.js is not set up to be required as a module. So even if there was a package.json and it specified an entry point, webpack (or alternatives like browserify) wouldn't be able to resolve it as a dependency.

 

What you can do is get webpack to consider a pre-made babylon file as a (static) dependency of your project, so that it gets copied into the distribution (and handled by webpack-dev-server). I'm doing this with the file-loader module. For example, if you put a minified babylon file in /external/ , you could then add this anywhere in your javascript:

require('file?name=b.js!./external/babylon.2.3.min.js'); 

and change your html to reference the script from webpack:

<script type="text/javascript" src="b.js"><script> 

This way webpack will treat babylon as a dependency, but not parse it for dependencies or minifiy it or add strict markers and so forth (which is realistically for the best).

 

Hi fenomas!

 

I didn't know about this as well but actually there is a proper babylonjs package on npm which properly exports BABYLON as a module:

 

https://www.npmjs.com/package/babylonjs

 

The only thing I currently do to work around the strict bug is to ignore babylonjs in my .babelrc like so:

 

{

    "ignore": "node_modules/babylonjs/*",

    "presets": [

        "react",

        "es2015",

    ]

}

 

However I can perfectly do

 

import BABYLON from "babylonjs";

 

now

 

So in my setup I have a pretty bare webpack config without any specialties

[fenomas]

Ahh! Okay, that'll work too.

 

It's good to know about the npm module. I use a script to pull in dailies from github, because quite often I'll complain about something here and DK will have it fixed a few hours later.  

 

In any case I imagine the module on npm is probably built from Tools/Gulp, with the package.json in that folder.