Conditionally import and use debug inspector depending on dev/prod environment?

Questions
1

Is there any clean way to conditionally import and enable the debug inspector depending on the environment (i.e. local dev vs production build)? I’m using webpack, ts and babel.

TS supports dynamic import expressions and there’s webpack plugins like webpack-inject-plugin but no matter what I’ve tried to date, as soon as I add those debug layer import statements, even if conditional, that code gets included in the bundle.

import "@babylonjs/inspector";

// canvas/engine/scene initialisation code ...

scene.debugLayer.show();

How would I include this only for the dev build?

2

What about dynamic import: Webpack and Dynamic Imports: Doing it Right - Frontend Weekly - Medium ?

1 Like
3

Thanks @Deltakosh

That link didn’t get me all the way but it put me on the right path.

I ended up using the webpack string-replace-loader and then in my webpack.config.dev.js a simple search and replace.

module: {
    rules: [
        {
            test: /\.(ts|js)x?$/,
            loader: 'string-replace-loader',
            options: {
                search: '/* babylonjs-inspector */',
                replace: 'import("@babylonjs/inspector").then(() => this._scene.debugLayer.show());',
            }
        }
    ]
}
2 Likes
4

hi. i think you dont need import inspector in your project DebugLayer - Babylon.js Documentation
Properties > InspectorURL Define the url to get the inspector script from. By default it uses the babylonjs CDN. so when you click your inspector button and call scene.debugLayer.show you get the inspector script from your url. you need only hide your button in production build. and i like babylon for this little timesaver things.

5

I’m using ES6 modules in my projects so this documentation applies:
https://doc.babylonjs.com/features/es6_support#almighty-inspector

Also, because I’m using TypeScript I’d get compile errors if I attempt to compile with inspector invoked but module (or inspector types) not imported.

I just don’t want to be constantly commenting out lines of code (whether that be the inspector call or a button that invokes it) to make a production build.

1 Like
6

understand. thanks.

7

To anyone coming here later: this seems to work fine with dynamic imports like this:

// this is how you know it's dev in Vite - check your tool docs as needed
if (import.meta.env.DEV) {
    // debug layer imports live inside this debugLayer.ts
    import("./debugLayer").then((module) => module.initDebugLayer(scene));
  }