ES6 Core Legacy Package

import * as BABYLON from "@babylonjs/core/Legacy/legacy.js";

This will work exactly like the none ES6 version and the entire library will be included as a dependency.

Hey @Deltakosh / @sebavan

When I load the whole core engine, is there any advantage in using ES6 over UMD ?

Do you still get some kind of tree shaking ?

cc @ryantrem as well who masters the dark hard of module imports

If you really need to use the FILE LEVEL for the import to get tree shaking to really work.

How do you know what is the path to some of these classes in ES6 ?

I had to actually use devin.ai to search through the Babylon.JS source files and generate me
a Cheat Sheet with all the imports I use.

How does one find this out without searching thru the whole codebase looking for the actual file path to the classes?

My Sheet Sheet:

import { Engine } from "@babylonjs/core/Engines/engine";
import { AbstractEngine } from "@babylonjs/core/Engines/abstractEngine";
import { WebGPUEngine } from "@babylonjs/core/Engines/webgpuEngine";
import { EngineStore } from "@babylonjs/core/Engines/engineStore";
import { EngineCapabilities } from "@babylonjs/core/Engines/engineCapabilities";
import { Scene } from "@babylonjs/core/scene";
import { Node } from "@babylonjs/core/node";
import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { Vector2 } from "@babylonjs/core/Maths/math.vector";
import { Vector4 } from "@babylonjs/core/Maths/math.vector";
import { Quaternion } from "@babylonjs/core/Maths/math.vector";
import { Matrix } from "@babylonjs/core/Maths/math.vector";
import { TmpVectors } from "@babylonjs/core/Maths/math.vector";
import { Color4 } from "@babylonjs/core/Maths/math.color";
import { Color3 } from "@babylonjs/core/Maths/math.color";
import { Epsilon } from "@babylonjs/core/Maths/math.constants";
import { Scalar } from "@babylonjs/core/Maths/math.scalar";
import { Axis } from "@babylonjs/core/Maths/math.axis";
import { Space } from "@babylonjs/core/Maths/math.axis";
import { Viewport } from "@babylonjs/core/Maths/math.viewport";
import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh";
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { InstancedMesh } from "@babylonjs/core/Meshes/instancedMesh";
import { LinesMesh } from "@babylonjs/core/Meshes/linesMesh";
import { VertexData } from "@babylonjs/core/Meshes/mesh.vertexData";
import { SubMesh } from "@babylonjs/core/Meshes/subMesh";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
import { BoundingInfo } from "@babylonjs/core/Culling/boundingInfo";
import { BoundingBox } from "@babylonjs/core/Culling/boundingBox";
import { Ray } from "@babylonjs/core/Culling/ray";
import { VertexBuffer } from "@babylonjs/core/Buffers/buffer";
import { FloatArray } from "@babylonjs/core/types";
import { Camera } from "@babylonjs/core/Cameras/camera";
import { FreeCamera } from "@babylonjs/core/Cameras/freeCamera";
import { UniversalCamera } from "@babylonjs/core/Cameras/universalCamera";
import { Light } from "@babylonjs/core/Lights/light";
import { ShadowLight } from "@babylonjs/core/Lights/shadowLight";
import { IShadowLight } from "@babylonjs/core/Lights/shadowLight";
import { DirectionalLight } from "@babylonjs/core/Lights/directionalLight";
import { SpotLight } from "@babylonjs/core/Lights/spotLight";
import { PointLight } from "@babylonjs/core/Lights/pointLight";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { ShadowGenerator } from "@babylonjs/core/Lights/Shadows/shadowGenerator";
import { IShadowGenerator } from "@babylonjs/core/Lights/Shadows/shadowGenerator";
import { CascadedShadowGenerator } from "@babylonjs/core/Lights/Shadows/cascadedShadowGenerator";
import { Material } from "@babylonjs/core/Materials/material";
import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial";
import { MultiMaterial } from "@babylonjs/core/Materials/multiMaterial";
import { ShaderMaterial } from "@babylonjs/core/Materials/shaderMaterial";
import { IShaderMaterialOptions } from "@babylonjs/core/Materials/shaderMaterial";
import { NodeMaterial } from "@babylonjs/core/Materials/Node/nodeMaterial";
import { MaterialPluginBase } from "@babylonjs/core/Materials/materialPluginBase";
import { MaterialDefines } from "@babylonjs/core/Materials/materialDefines";
import { UniformBuffer } from "@babylonjs/core/Materials/uniformBuffer";
import { Effect } from "@babylonjs/core/Materials/effect";
import { ShaderLanguage } from "@babylonjs/core/Materials";
import { Texture } from "@babylonjs/core/Materials/Textures/texture";
import { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture";
import { CubeTexture } from "@babylonjs/core/Materials/Textures/cubeTexture";
import { VideoTexture } from "@babylonjs/core/Materials/Textures/videoTexture";
import { RenderTargetTexture } from "@babylonjs/core/Materials/Textures/renderTargetTexture";
import { Animation } from "@babylonjs/core/Animations/animation";
import { IAnimationKey } from "@babylonjs/core/Animations/animationKey";
import { _IAnimationState } from "@babylonjs/core/Animations/animation";
import { AnimationGroup } from "@babylonjs/core/Animations/animationGroup";
import { Animatable } from "@babylonjs/core/Animations/animatable";
import { IAnimatable } from "@babylonjs/core/Animations";
import { TargetedAnimation } from "@babylonjs/core/Animations/animationGroup";
import { EasingFunction } from "@babylonjs/core/Animations/easing";
import { Skeleton } from "@babylonjs/core/Bones/skeleton";
import { Bone } from "@babylonjs/core/Bones/bone";
import { MorphTarget } from "@babylonjs/core/Morph/morphTarget";
import { Observable } from "@babylonjs/core/Misc/observable";
import { Observer } from "@babylonjs/core/Misc/observable";
import { Tools } from "@babylonjs/core/Misc/tools";
import { AssetsManager } from "@babylonjs/core/Misc/assetsManager";
import { ContainerAssetTask } from "@babylonjs/core/Misc/assetsManager";
import { MeshAssetTask } from "@babylonjs/core/Misc/assetsManager";
import { TextFileAssetTask } from "@babylonjs/core/Misc/assetsManager";
import { BinaryFileAssetTask } from "@babylonjs/core/Misc/assetsManager";
import { ImageAssetTask } from "@babylonjs/core/Misc/assetsManager";
import { AbstractAssetTask } from "@babylonjs/core/Misc/assetsManager";
import { Tags } from "@babylonjs/core/Misc/tags";
import { Logger } from "@babylonjs/core/Misc/logger";
import { EnvironmentTextureTools } from "@babylonjs/core/Misc/environmentTextureTools";
import { WebRequest } from "@babylonjs/core/Misc/webRequest";
import { IFileRequest } from "@babylonjs/core/Misc/fileRequest";
import { RegisterClass } from "@babylonjs/core/Misc/typeStore";
import { EventState } from "@babylonjs/core/Misc/observable";
import { DeepImmutable } from "@babylonjs/core/types";
import { Nullable } from "@babylonjs/core/types";
import { DeepCopier } from "@babylonjs/core/Misc/deepCopier";
import { DefaultLoadingScreen } from "@babylonjs/core/Loading/loadingScreen";
import { ILoadingScreen } from "@babylonjs/core/Loading/loadingScreen";
import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
import { ISceneLoaderProgressEvent } from "@babylonjs/core/Loading/sceneLoader";
import { ISceneLoaderPlugin } from "@babylonjs/core/Loading/sceneLoader";
import { ISceneLoaderPluginAsync } from "@babylonjs/core/Loading/sceneLoader";
import { AssetContainer } from "@babylonjs/core/assetContainer";
import { InstantiatedEntries } from "@babylonjs/core/assetContainer";
import { RayHelper } from "@babylonjs/core/Debug/rayHelper";
import { PhysicsViewer } from "@babylonjs/core/Debug/physicsViewer";
import { RenderingManager } from "@babylonjs/core/Rendering/renderingManager";
import { IAction } from "@babylonjs/core/Actions/action";
import { ActionManager } from "@babylonjs/core/Actions/actionManager";
import { ExecuteCodeAction } from "@babylonjs/core/Actions/directActions";
import { PointerEventTypes } from "@babylonjs/core/Events/pointerEvents";
import { PointerInfo } from "@babylonjs/core/Events/pointerEvents";
import { IPointerEvent } from "@babylonjs/core/Events";
import { GamepadManager } from "@babylonjs/core/Gamepads/gamepadManager";
import { Gamepad } from "@babylonjs/core/Gamepads/gamepad";
import { Xbox360Pad } from "@babylonjs/core/Gamepads/xboxGamepad";
import { DualShockPad } from "@babylonjs/core/Gamepads/dualShockGamepad";
import { GenericPad } from "@babylonjs/core/Gamepads";
import { Xbox360Dpad } from "@babylonjs/core/Gamepads/xboxGamepad";
import { DualShockDpad } from "@babylonjs/core/Gamepads/dualShockGamepad";
import { StickValues } from "@babylonjs/core/Gamepads/gamepad";
import { IParticleSystem } from "@babylonjs/core/Particles/IParticleSystem";
import { Sound } from "@babylonjs/core/Audio/sound";
import { AudioEngineV2, IWebAudioEngineOptions, CreateAudioEngineAsync, AbstractSpatialAudio, StaticSoundBuffer, IStaticSoundBufferOptions, StreamingSound, IStreamingSoundOptions, IStaticSoundOptions, StaticSound } from "@babylonjs/core/AudioV2";
import { GLTFLoader } from "@babylonjs/loaders/glTF/2.0/glTFLoader";
import { GLTFFileLoader } from "@babylonjs/loaders/glTF/glTFFileLoader";
import { ArrayItem, IGLTFLoaderExtension, IScene, INode, IMaterial, IAnimation, IMesh, IMeshPrimitive, registerGLTFExtension } from "@babylonjs/loaders/glTF/2.0";
import { ICrowd, INavMeshParameters, IObstacle, INavigationEnginePlugin, IAgentParameters } from "@babylonjs/core/Navigation";
import { PhysicsImpostor } from "@babylonjs/core/Physics/v1/physicsImpostor";
import { PhysicsEngine } from "@babylonjs/core/Physics/v1/physicsEngine";
import { PhysicsBody, PhysicsShape, PhysicsShapeType, PhysicsShapeSphere, PhysicsShapeCapsule, PhysicsShapeCylinder, PhysicsShapeBox, PhysicsShapeContainer, PhysicsShapeMesh, PhysicsShapeConvexHull, PhysicsRaycastResult, ShapeCastResult, PhysicsMassProperties, PhysicsMotionType, PhysicsMaterialCombineMode, IRaycastQuery, IPhysicsCollisionEvent, IBasePhysicsCollisionEvent, IPhysicsEnabledObject } from "@babylonjs/core/Physics";
import { HavokPlugin } from "@babylonjs/core/Physics/v2/Plugins/havokPlugin";
import HavokPhysics from '@babylonjs/havok';

I use vscode and Ctrl+p to find the file as it is the same name as the class most of the time.

As far as the original question, I guess that does not matter anymore.

I refactored my ES6 version using the above FILE-LEVEL imports and no longer try to use LEGACY to keep using the BABYLON namespace in pure ES6 projects

1 Like