Install & Setup through npm?

[agmcleod]

Hi there,

I'm using babylon for a little prototype project, and I tried getting it through npm. It & cannonjs installed just fine, but pulling them in for a project leads to some issues. The inspector panel throws errors do to BABYLON not being global for example. I like having it through the package, as the tooling is better around it, VSCode autocomplete for example. For now i've just gone the route of including the script files.

[Hersir]

@agmcleod What is your setup? Do you use webpack or other packaging tool? 

[agmcleod]

@Hersir Yep! Using webpack2 & yarn. I added the babylonjs and cannon packages as dependencies. At the entry file, i would have

 

import BABYLON from 'babylonjs'
import 'cannon'

The BABYLON instance seemed to work okay, but yeah things fell apart when it tries to load the inspector. As it expects BABYLON to be global. I suppose I could hoist it to WINDOW maybe, but that sounds not so smart

 

Giving it another try this morning, seem to have trouble loading the physics plugin. The version I did with just injecting the script tag, is using a build i downloaded, which includes cannonjs. So not sure if I need to bootstrap that into Babylon somehow.

[Hersir]

@agmcleod You can use expose-loader for that.

{
 test: require.resolve('babylonjs'),
 use: [{
   loader: 'expose-loader',
   options: 'BABYLON',
 }],
},

Similar for cannon as Babylon uses it from global scope.

[agmcleod]

Oh damn, that's pretty cool. I actually just tried hacking it with: window.CANNON = CANNON, which worked :D. But I feel like that's a more modern way of doing things.

[agmcleod]

Gave it a try, having both BABYLON & CANNON setup through the expose-loader seems to cause an infinite loop of rebuilds from webpack. I tried just putting in cannon, and removing my window hoist, but it doesn't seem to get found by babylon. May just keep my window hoist hack instead.