Create Custom Build of BJS?

Questions
1

Is it possible to create a custom build of BJS that only includes certain features? I can’t use treeshaking in my project. Thanks

2

Of course!

The code is open, our build tools are published, everything is on our github repository. Download the repo, do your magic, build, and you are your own version of babylon :slight_smile:

3

I havent looked it the code in a while. Is there a build file you can point me to that I can easily edit?

4

Wasn’t there a place on the BJS website you could pick what different features you wanted and it would do a build for you specifically?

I know there was, just not sure if its still live.

1 Like
5

I think that page no longer worked after treeshaking was added.

6

Is there no easy way to do this with the latest version?

7

Unfortunately no easy way :frowning:

8

But you can check this: Start Contributing to Babylon.js | Babylon.js Documentation

More precisely we build custom builds here:
Babylon.js/tests/es6Modules at master · BabylonJS/Babylon.js (github.com)

It stills requires you to set up a quick webpack config but this way you can build the way you want

1 Like
9

Can someone tell me how I would add the BABYLON namespace to the ES5 code that webpack creates?

10

adding @sebavan

11

I think there might be some other issue. I just looked more closely at the file and I see there is a global BABYLON var. I need to investigate a little more.

I’m probably just missing an import.

12

I wonder if you could just use rollup to build your own custom build referencing just the parts that you need from @babylon/* es6 and target ES5. I’ve done some tests recently with rollup and then analyzing bundle contents with interactive treemaps of babylonjs for static site generation. I realize you aren’t using webpack in your current project, but perhaps can to build. Cheers.

13

I’ll look into rollup if this doesn’t work. Thanks, Brian

This is the error I’m getting right now in CustomMaterial:

Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at extendStatics (babylon.customMaterial.js:151)
    at __extends (babylon.customMaterial.js:155)
    at babylon.customMaterial.js:425
    at Module../custom/customMaterial.ts (babylon.customMaterial.js:618)
    at __webpack_require__ (babylon.customMaterial.js:30)
    at Module../custom/index.ts (babylon.customMaterial.js:634)
    at __webpack_require__ (babylon.customMaterial.js:30)
    at Module.<anonymous> (babylon.customMaterial.js:899)
    at Module../legacy/legacy-custom.ts (babylon.customMaterial.js:923)
14

To clarify, that CustomMaterial is separate from the custom build I created.

15

and this is my custom.ts file I created based off the other examples in that es6Modules folder:

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { Vector3 } from "@babylonjs/core/Maths/math";
import { FreeCamera } from "@babylonjs/core/Cameras/freeCamera";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { DirectionalLight } from "@babylonjs/core/Lights/directionalLight";
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";


import "@babylonjs/core/Materials/standardMaterial";
import "@babylonjs/core/Bones/boneIKController";

import "@babylonjs/core/Materials/Textures/texture"
import "@babylonjs/core/Materials/effect";
import "@babylonjs/core/Materials/materialDefines";
import "@babylonjs/core/Misc/typeStore";

// Required side effects to populate the Create methods on the mesh class. Without this, the bundle would be smaller but the createXXX methods from mesh would not be accessible.
import "@babylonjs/core/Meshes/meshBuilder";
16

it looks like what you are extending wasn’t imported properly. i had that error recently with materials - checking :eyes:

edit: That was maybe on my recent work importing GridMaterial to my library, it looks like you have:

import { PushMaterial /* or another material */ } from 'your-custom-build';
class CustomMaterial extends PushMaterial {
                                       ^^ this is undefined?
}
17

That is CustomMaterial from here:

18

It just occurred to me that I am using the latest version of BJS and that custom material is from a few months ago. I’ll try with the most recent build of custom material.

Edit: Still getting the same error. I’m going to make sure this build I created can create the simple default scene.

19

Can’t even create a simple box with my build:

Uncaught (in promise) TypeError: BABYLON.Engine is not a constructor

createDefaultEngine file:///C:/Users/abowm/Desktop/sample/index.html:38

asyncEngineCreation file:///C:/Users/abowm/Desktop/sample/index.html:77

initFunction file:///C:/Users/abowm/Desktop/sample/index.html:81

<anonymous> file:///C:/Users/abowm/Desktop/sample/index.html:84

[index.html:38:55](file:///C:/Users/abowm/Desktop/sample/index.html)

Uncaught TypeError: engine is null

<anonymous> file:///C:/Users/abowm/Desktop/sample/index.html:94
20

I would need to see more what you are doing. If you are trying to import from @babylonjs/materials and the external dependency to StandardMaterial cannot be resolved then your error does not look unexpected. I can have a look after work more - are you able to share a repro?

edit: I’m going to try rollup and a plain HTML file and src to a custom.js file.