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

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 ...;

How would I include this only for the dev build?

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

1 Like

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 a simple search and replace.

module: {
    rules: [
            test: /\.(ts|js)x?$/,
            loader: 'string-replace-loader',
            options: {
                search: '/* babylonjs-inspector */',
                replace: 'import("@babylonjs/inspector").then(() =>;',

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 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.

I’m using ES6 modules in my projects so this documentation applies:

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

understand. thanks.