Babylon Inspector with ES6 and Rollup

Questions
1

I am using Babylon ES6 with Rollup, and I have no luck using the inspector.
I wanted to ask here before moving to webpack or just giving up on using the inspector all together. Everything else runs great.

Importing the inspector is the kiss of death.
import “@babylonjs/inspector”

Doing this requires to install React types and increase the build time by 3x. I get this error where it is still looking for the old BABYLON declaration and require. root[“INSPECTOR”] = factory(root[“BABYLON”], and a bunch of webpack text. The error says “require is not defined”

I read this forum post and concluded that I shouldn’t import the inspector. How to use Inspector with ES6 Modules
But activate it in the index.html and use the HTML script tag to use the inspector.

script src=“https://preview.babylonjs.com/babylon.js”>
script src=“https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js”>
script src=“https://preview.babylonjs.com/gui/babylon.gui.min.js”>
script src=“https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js”>/script>

let context;
function init() {
  context = new game.MyGame();
  context.initialize().then(() => {
    context.getScene().debugLayer.show({
      overlay: true,
      globalRoot: document.getElementById('inspector')
    });
  });
}

Which would’ve been a great idea if it worked. I think it has something to do with the need for an ES6 inspector.

If this is possible to use Rollup and the inspector, any help would be great.

Thanks

1 Like
2

Hi Eddie,
The inspector definitely didn’t work this way before, but if you use Babylon 4.2 it works great.

I haven’t specifically tried in Rollup yet, but I’ve been using buildless dev tooling using https://modern-web.dev/ so it should work exactly the same in terms of module resolution.

I’ve been specifically using the @babylonjs/core packages. I started with importing the inspector like you’re doing, but once you get the inspector loaded, you’ll need to import many more modules or functionality will just be broken when it’s running.

What’s more is that I’ve found that the inspector requires a global BABYLON object (which kind of defeats the purpose of modules, but since I’m just using the inspector when debugging, I’m cool with it).

Between those two caveats, when I want to use the inspector, I import the whole of Babylon core:

import * as Core from '@babylonjs/core';

And then I set the global BABYLON object to the contents of that import:

window.BABYLON = { ...Core };

Hope this helps!

3 Likes